Canvas Mastery Path

See the Whole Road Before Memorizing APIs

A five-year-old can see a picture, but a production system must answer more questions. What are the things in the picture called? Who may move them? Can they be recovered after a crash? Can someone who cannot see the canvas still operate it? Why does it remain responsive with one hundred thousand objects? Who wins when three people and an AI edit at the same time?

This course begins with those questions. Every chapter first gives you a toy world you can hold in your head so you can predict what will happen. Only then does it translate the toy into formal terminology, TypeScript interfaces, browser behavior, and test evidence. An analogy is never allowed to impersonate a fact: every chapter identifies exactly where the analogy stops working.

What You Will Build

You will continuously extend one teaching project, Canvas Lab, until it becomes a Visual Operations Canvas with:

• custom business shapes, text, images, connectors, and snapping;
• keyboard and screen-reader alternatives;
• history, autosave, crash recovery, and version migrations;
• a secure asset lifecycle with PNG, SVG, JSON, and tiled high-resolution export;
• repeatable geometry, state-machine, browser, visual, and performance tests;
• worker or GPU rendering only when evidence justifies it;
• recoverable multiplayer sync, offline queues, and presence;
• AI that can issue only bounded actions that are previewable, undoable, and auditable.

Keep These Three Layers Separate

Rendering has boundaries too. The DOM keeps text editing, semantics, and accessibility. Canvas 2D powers the high-frequency teaching kernel. A GPU renderer joins only after benchmarks demonstrate a benefit. The document never depends on one renderer, so replacing the brush never requires tearing up the ledger.

The Learning Loop in Every Chapter

1. Play with a toy: Build a predictable mental model from concrete objects, actions, and outcomes.
2. Translate it: Map every toy element to an engineering concept and mark the analogy’s boundary.
3. Kill a misconception: Use the smallest counterexample that exposes an intuition that only works in a demo.
4. Build something: Add one runnable, testable capability to Canvas Lab.
5. Break it on purpose: Record the symptom, log or trace, root cause, repair, and regression test.
6. Pass with evidence: Automate what can be proved automatically; document the environment and criteria for what still requires human verification.
7. Teach it back: Explain the rule without jargon and transfer it to a new scenario.

Before You Begin

All course examples use TypeScript in strict mode. You need a modern browser, Node.js 22, a package manager, browser DevTools, and a terminal that can run unit and browser tests. Chapters involving React, tldraw, WebGPU, or browser compatibility pin a concrete version or state a verification date. Time-sensitive claims must be rechecked against official documentation.

You do not need prior knowledge of matrices, spatial indexes, CRDTs, or shaders. You only need to do three things consistently: predict first, break the system yourself, and use evidence to explain why the repair works.