HTML Canvas Deep Dive: A Travelogue
An open source interactive guide to drawing, animation, and games with HTML Canvas.
From workshop to interactive book
I made HTML Canvas Deep Dive: A Travelogue from a three-hour, hands-on Canvas workshop I taught at OSCON in the mid 2010s. The sequence of small, focused lessons became the book's core structure: explain a concept, try it in code, then build something with it.
The book is an interactive guide rather than a static API reference. Readers start with drawing, paths, text, and images, then make charts, animations, and a small game. The original examples let readers change code and see the result in the page using a novel draggable interface inspired by Bret Victor's tangle work.
An early edition was also packaged as an interactive ebook for tablet platforms. I was working at Palm / HP at the time, so it was released on the HP Touchpad WebOS tablet (briefly the #2 tablet, behind the iPad).
As the book developed I expanded the scope beyond 2D drawing to include
WebGL with Three.js,
Web Audio data viz,
webcam access with getUserMedia(),
and mobile performance optimization.
After the first edition
The online edition and its example code are still up, and the code repo preserves it as an open source project. In 2019 I wrote about rebooting the book after my custom authoring and build tools had fallen prey to bitrot. Then COVID hit and I put that on the back burner. Now with access to cheap LLMs I'm working on a refresh of the book with modern tooling .
Though it's a personal project that I never advertise, I still get an absurd number of visits to the book thanks to a link from MDN.