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
Introduction
Starfield Background
Intro to Canvas Animation
Random Bounce in a Box
Animated Random Bars
Animated Manga Panel
Generating Static
Animated Static
Your Name In Lights
Glitch Art
Understanding Particles
Point Mesh Animation
Optional
These articles are part of other reading lists (primarily Galleries) but each use <canvas>
in interesting ways:
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.