Looking at this question from another side:
how does a developer choose one technology over another?
- integrates better in their already built system
- is easier to use
- is faster
- has more capabilities or better suits their needs
- cost
- more platfrom-independant
So I’ll discuss the differences between canvas and webGL APIs regarding these qualities.
Both canvas and webGL are JavaScript APIs. They are pretty much the same regarding integration (binding). They are both supported by a number of libraries that could speed up your coding. Different libraries give you different ways to organize your code, so library choice dictates how your drawing APIs are structured, but it’s still pretty much the same thing (how the rest of the code binds together with it). If you use library, the ease of writing code depends on the library itself.
If you write code from zero, the canvas API is much easier to learn and understand. It requires minimal math knowledge, and development is fast and straightforward.
Working with the WebGL API requires strong math skills and a full understanding of the rendering pipeline. People with these skills are harder to find, production is slower (due to the size and complexity of such a code base), and therefore it costs more.
WebGL is faster and it has more capabilities. No doubt about that. It’s a native 3D API that gives you full access to the rendering pipeline, code and effects are executed faster and are more ‘tweakable’. With webGL there really is no limit.
Both canvas and webGL are html5 goodies. Usually the devices that support one will support and the other.
So, to sum up:
- merging the drawing API code and the rest (integration): similar
- ease of use:
- (with library) canvas = webGL
- (from scratch) webGL << canvas
- speed: webGL > canvas
- capabilities: webGL > canvas
- cost: webGL is much more expensive
- platform: very similar
Hope this helps.
P. S. Open for discussion.