The canvas tag is an arbitrary HTML5 area that functions as a drawing surface. Unlike SVG, the Canvas API doesn’t create induvidual addressable elements; instead, it writes to the drawing area pixel by pixel using JavaScript.

While this can make drawing on the canvas more of a challenge for new coders, it also makes it very fast in execution: once you have a handle on the basics, fantastic interactive effects can be coded quite easily. This feature also makes the Canvas API an excellent medium for modern web apps, games, and advanced options like 3D and VR.

This reading list is a little different from others, in that rather than exploring each aspect of the specification in detail, articles move quickly from explanation to practical examples, continued in the “Optional” section below.

Prerequisites: The JavaScript reading list to this point

Time: 3 hours

1. Introduction
2. Starfield Background
3. Intro to Canvas Animation
4. Random Bounce in a Box
5. Animated Random Bars
6. Animated Manga Panel
7. Generating Static
8. Animated Static
9. Your Name In Lights
10. Glitch Art
11. Understanding Particles
12. Point Mesh Animation

Optional

These articles are part of other reading lists (primarily Galleries) but each use <canvas> in interesting ways:

1. Scratch-off Reveal
2. Before-and-After Video Comparison

Photograph by Björn Bechstein, used under a Creative Commons license.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.