Desynchronized WebGL canvas
The optional desynchronized parameter of a canvas's getContext() method permits the browser to draw a WebGL 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 WebGL 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.webgl_context.options_desynchronized_parameter | 81 | 79 | | | 75 | |
- ChromeOS and Windows
- ChromeOS only
- This browser only partially implements this feature
- This feature was removed in a later browser version (81)
Syntax
const gl = canvas.getContext('webgl', {
desynchronized: true,
preserveDrawingBuffer: true
});Live demo
Low-latency WebGL idea
Apply the same desynchronized concept to a WebGL rendering surface.
Use cases
Highlight the kinds of scenes where low-latency rendering is most noticeable.
Rendering note
Remember that browser support and latency wins vary by GPU, driver, and browser engine.
Use cases
Draw custom visuals
Use Desynchronized WebGL canvas when browser rendering surfaces need more control for charts, media, or interactive graphics.
Support advanced rendering
Apply Desynchronized WebGL canvas where GPU-backed or low-level drawing improves the experience.
Cautions
- Test Desynchronized WebGL 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 WebGL canvas supports the intended task without making the page harder to perceive, understand, or operate.
Related links
Powered by web-features