The limit it removes
A normal canvas is tied to the DOM and can only be drawn from the main thread. Heavy drawing there competes with layout, input, and the rest of your JavaScript. OffscreenCanvas decouples the drawing surface from the DOM so it can be rendered on a worker.
How it works
- You call transferControlToOffscreen on a canvas element, producing an OffscreenCanvas you send to a worker by postMessage.
- The worker holds the rendering context and draws independently, including inside its own requestAnimationFrame loop.
- Frames produced by the worker are composited to the visible canvas without main thread involvement.
Why it helps
- Animation keeps running even when the main thread is busy with other work.
- Expensive WebGL or 2D rendering no longer stalls input and scrolling.
Considerations
- The worker still has no DOM, so pointer events arrive on the main thread and must be forwarded.
- Not every environment supports it; provide a main thread fallback.
- Coordinating sizing and device pixel ratio across threads takes care.
Key idea
OffscreenCanvas moves canvas rendering to a worker so animations keep producing frames even while the main thread is busy.