Before you start to draw with Canvas, let's have a brief look at its concept – the mental model that will help you approach, plan, and write your applications. Canvas in its material form is a single HTML5 element. It is literally a blank canvas that you can draw on. For the actual drawing, you use the Canvas context – the Canvas API. The context can be thought of as your toolbox that can be manipulated with JavaScript.
You can compare the Canvas element with the root SVG element, as both contain all parts of the drawing. However, the key difference is that SVG (like HTML) operates in retained mode. The browser retains a list of all objects drawn onto the SVG (or HTML) canvas within the Document Object Model (DOM) – the scene-graph of your web application. This makes your drawing almost material. You produce a list of objects, change...