Canvas 101

<canvas> is a HTML5 element. In layman's terms, it's like an <img> you can draw on, dynamically, using JavaScript. You can use canvas to make animations, games, presentations etc.

In this series, we will go over how to use canvas to draw simple shapes, add images, texts, or more complex shapes, and apply styles to them.

The Canvas API is quite low-level, and often very inconvenient (more on this later), so for more complicated tasks like animations, it's better to use a library like Fabric.js, which provides an object-model abstraction, which feels a bit more like 'normal JavaScript'.

Canvas is supported since Chrome 4.0, IE9, FF2, Safari 3.1, Opera 9. If you need to support Canvas in IE 7 or 8, you can use the ExplorerCanvas library