Canvas 2D
Graphics · 4 stages · 28 units in the full series · 28 published in English
Series goal
Distinguish logical coordinates from pixels and build a time-based Canvas editor yourself.
Prerequisites
JavaScript; coordinates and functions
Practice approach and scope
Learning units are not calendar days. Read the explanation and tasks, check the completion criteria, then move on. Use each example as a starting point: change variables and observe the results. Built-in examples and tasks requiring a separate environment are identified separately. Opening an example does not complete a unit.
Existing unit IDs and notes are preserved. The original 01, 02, and 03 examples occupy positions 1, 14, and 28 in the expanded sequence, so the number in the address may differ from the learning order.
Only published English units are linked below. The full series has 28 units.
Learning path
Stage 1 · Pixels and Drawing State
- 01. Coordinates and Pixels — Editable example
- 02. Paths and Line State — Editable example
- 03. Shape Functions and State Isolation — Editable example
- 04. Matrices and Rotation Centers — Editable example
- 05. Colors and Gradients — Editable example
- 06. Loading and Cropping Images — Editable example
- 07. Text and Badge Composition — Editable example
Stage 2 · Time, Coordinates, and Input
- 08. The Animation Clock — Editable example
- 09. Stopping and Resuming — Editable example
- 10. Boundary Collisions and Integration — Editable example
- 11. Converting Pointer Coordinates — Editable example
- 12. Shape Selection and Hit Testing — Editable example
- 13. Dragging and Pointer Lifetimes — Editable example
- 14. Time and Input — Editable example
Stage 3 · Scene Editing and Compositing
- 15. Scene Data and Redrawing — Editable example
- 16. Undo and History — Editable example
- 17. Making an Eraser with Compositing — Editable example
- 18. Clipping and Masks — Editable example
- 19. Reading Pixels and Applying Filters — Editable example
- 20. Static Layers and Caching — Editable example
- 21. High Resolution and Responsive Layout — Editable example
Stage 4 · Accessibility, Particles, and Performance Verification
- 22. Accessible Canvas Controls — Editable example
- 23. Exporting and Source Data — Editable example
- 24. Particle State and Emission — Editable example
- 25. Particle Reuse and Allocation — Editable example
- 26. Frame Measurement and Bottlenecks — Editable example
- 27. Integrated Editor and Regression Checks — Editable example
- 28. Particles and Cost — Editable example
Capstone project and deliverables
A canvas lab with shape editing, undo, particle previews, PNG/JSON saving, and a comparison report
Keep the implementation, run instructions, baseline and changed conditions, failure cases, and recovery steps together. Do not report unmeasured performance or tests you have not run as results.