Drawing a model from different viewpoints on HTML5 <canvas>
Well this is for a project I chose to do for my computer graphics class - drawing a grand piano that can be viewed from different angles.
I haven't yet begun the work, and I just completed lynda.com course on HTML5:Graphics and Animation with Canvas. I can see how one could make a cube, or a ball, those sorts of simple figures. But I don't know how I should proceed on my project. Defining each small surface one by one, sure will be very tedious. Should I learn some more? WebGL or something else? Or is the 'tedious' way an 'okay' way? What would you suggest?
"The different angles" implies that you want to model and render a three dimensional object.
Here is one recipe to success:
Design your model (grand piano) in any open source and free modelling application, like Blender
Then, learn basics of Three.js or similar WebGL framework which simplifies the complex process of rendering a 3D scene
It is possible to render objects to <canvas> on Three.js without WebGL, but using WebGL backend simplies the process a lot and I highly recommend sticking with WebGL.
HTML5 Canvas API is mostly useful for 2D graphics and does not suit for your purpose very well, as you have noticed with its limitations.
Use WebGL, Three.js aims to be very accessible. www.udacity.com have a course on 3d graphics that uses Three.js that is very good for beginning. Real-time 3D graphics is basically about creating a 2d image that re-creates that effect of a 3d perspective and can be updated in real-time. Going about this in a brute force way won't teach you anything about how this effect is achieved.