Desynchronized 2D canvas
The optional desynchronized parameter of a canvas's getContext() method permits the browser to draw a 2D canvas independently of the event loop. This can reduce drawing latency. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
api.HTMLCanvasElement.getContext.2d_context.options_desynchronized_parameter | 81 | 79 | | 15 | 75 | 15 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 4 item(s)
Implementation note
- ChromeOS and Windows
- ChromeOS only
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (81)
Syntax
JAVASCRIPT
const ctx = canvas.getContext('2d', { desynchronized: true });
// Skip compositing for low-latency rendering
ctx.lineWidth = 2;
ctx.strokeStyle = '#000';Live demo
Low-latency drawing hint
Describe the desynchronized hint used for responsive drawing surfaces.
PreviewFullscreen
Latency trade-offs
Explain that low-latency hints may interact with compositing and rendering guarantees.
PreviewFullscreen
Use cases
-
Draw custom visuals
Use Desynchronized 2D canvas when browser rendering surfaces need more control for charts, media, or interactive graphics.
-
Support advanced rendering
Apply Desynchronized 2D canvas where GPU-backed or low-level drawing improves the experience.
Cautions
- Test Desynchronized 2D canvas in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Make sure Desynchronized 2D canvas supports the intended task without making the page harder to perceive, understand, or operate.