Our clients often asks us what is the difference. So here is a short explanation.

Canvas and WebGL are both part of the HTML5 standard.

WebGL is an API for rendering interactive 3D graphics. It provides a special language (similar to C++) which you use to describe a 3D scene (objects, light sources, camera position, textures, etc.). With that language you can describe things like “a sphere with marble texture in the centre of the scene”, “a red directional light pointing from the corner of the scene to the centre” etc.

Canvas is an HTML tag which appears in the browser as a rectangular area on the page. It’s up to you what you show in the area. There is Canvas 2D API for that. You do things like “draw a 1px blue line from 0,0 to 100,200” or "draw a red circle at position 20,30” or "fill canvas with black colour” or “draw image XYZ at position 10,10” etc. That’s what we use for HTML5 banners.

Eventually you can combine both for 3D graphics. You render the 3D scene defined by WebGL in the context of the Canvas. Canvas behave as any other HTML element. You can define it’s position on the page, dimensions and even make it responsive. Each HTML5 banner, for instance, is a separate Canvas element.