OffscreenCanvas
Engineering · 4 stages · 28 units in the full series · 28 published in English
Series goal
Design Canvas ownership and size·input protocols, and evaluate the benefits and costs of Worker rendering.
Prerequisites
Canvas 2D·Web Workers
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 · Control and the First Render
- 01. Transferring Canvas Control — Editable example
- 02. Renderer Contract — Editable example
- 03. Initialization Handshake — Editable example
- 04. Context Creation Failure — Editable example
- 05. Coordinate Units — Editable example
- 06. Frame Timing — Editable example
- 07. Basic Rendering Validation — Editable example
Stage 2 · Synchronizing Size and Input
- 08. Resize Messages — Editable example
- 09. Resize Sequence Numbers — Editable example
- 10. Detecting DPR Changes — Editable example
- 11. Transforming Pointer Coordinates — Editable example
- 12. Coalescing Input — Editable example
- 13. Pointer Capture and Cancellation — Editable example
- 14. Resize and Input Protocol — Editable example
Stage 3 · Rendering Lifecycle and Recovery
- 15. Updating Scene State — Editable example
- 16. Batching Particle Data — Editable example
- 17. Pausing and Resuming — Editable example
- 18. Page Visibility Policy — Editable example
- 19. Cleanup Protocol — Editable example
- 20. Restarting with a New Canvas — Editable example
- 21. Recovering from Worker Failure — Editable example
Stage 4 · Responsiveness Comparison Project
- 22. Transferring ImageBitmap Frames — Editable example
- 23. Canvas Context Loss — Editable example
- 24. Request and Display Latency — Editable example
- 25. Resolution and Workload — Editable example
- 26. Main-Thread Contention Experiment — Editable example
- 27. Summarizing Experiment Results — Editable example
- 28. Evaluating Rendering Separation — Editable example
Capstone project and deliverables
Run the same particle scene on the main thread and in a Worker, comparing resize·input·errors·stop·restart behavior.
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.