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.
Overview
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 |
- ChromeOS and Windows
- ChromeOS only
- This browser only partially implements this feature
- This feature was removed in a later browser version (81)
Syntax
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.
Latency trade-offs
Explain that low-latency hints may interact with compositing and rendering guarantees.
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.
Related links
Powered by web-features