Track C

Canvas 2D, under the hood

The immediate-mode drawing surface: why the canvas forgets every shape, the pixel backing store, the drawing state machine, paths, the transform matrix, compositing, text and images, and the performance model.

1. Immediate mode: why the canvas forgets everything you draw

   The single fact that explains almost everything strange about the 2D canvas is that it has no memory of what you drew — every command paints pixels into a bitmap and is instantly forgotten, leaving no shapes, no objects, nothing to move or click. This lesson makes that concrete, contrasts it with the retained-mode world of the DOM and SVG, and derives the consequences that the rest of the module lives inside.

   12 min
2. The pixel backing store: buffer size vs display size

   The canvas from the last lesson is "just a bitmap" for a precise reason — it owns a real pixel buffer whose dimensions come from the width and height attributes, entirely separate from the CSS size that decides how big that buffer is stretched on screen, and the gap between the two (compounded by device pixel ratio) is the single most common source of blurry canvas art.

   13 min
3. The drawing state machine and the save/restore stack

   Immediate-mode commands take no style arguments — fill() doesn't say what color, stroke() doesn't say how wide — because every visual setting lives as sticky state sitting in the context object, and save()/restore() exist to push and pop that entire pile of state as one unit so a transform or clip you set for one shape can't leak into the next.

   13 min
4. Paths: the build-then-paint two-phase model

   Drawing a shape on the canvas is never one step — you first build an abstract path out of moveTo, lineTo, and curve calls into a piece of hidden context state, and only a separate fill or stroke call rasterizes that accumulated path into pixels, which is exactly the mechanism behind the single most common canvas bug.

   13 min
5. The transform matrix: moving the coordinate system, not the shapes

   There are no shapes on a canvas to move, so translate, rotate, and scale don't touch your drawing at all — they multiply into a hidden current transformation matrix that every coordinate you later pass to fill, stroke, or drawImage gets run through on its way to the pixel buffer, and getting comfortable with that matrix is what makes rotating something around an arbitrary point stop feeling like a trick.

   13 min
6. Compositing and blending: how new pixels combine with old

   When you draw on a canvas the new pixels don't simply replace what's underneath — they combine with it according to a rule called globalCompositeOperation, and switching that rule turns the same draw call into a mask, an eraser, or a blend, all governed by one source-versus-destination model.

   13 min
7. Text, images, and direct pixel access

   Beyond filled and stroked paths, the canvas draws text through a baseline-anchored positioning model, blits whole images with a scaling three-way overload, and — through getImageData — lets you reach past all of that abstraction to the raw RGBA bytes at the cost of a real performance stall.

   13 min
8. Canvas performance and the render loop

   Because immediate mode means every frame is a full clear-and-redraw rather than an edit, canvas performance is really the art of finishing that redraw inside the frame budget — cutting overdraw, avoiding readback stalls, and reusing work through layering and offscreen caching instead of repainting everything from scratch every time.

   14 min