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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
api.HTMLCanvasElement.getContext.webgl_context.options_desynchronized_parameter | 81 | 79 | | | 75 | |
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 gl = canvas.getContext('webgl', {
desynchronized: true,
preserveDrawingBuffer: true
});Live demo
Low-latency WebGL idea
Apply the same desynchronized concept to a WebGL rendering surface.
PreviewFullscreen
Use cases
Highlight the kinds of scenes where low-latency rendering is most noticeable.
PreviewFullscreen
Rendering note
Remember that browser support and latency wins vary by GPU, driver, and browser engine.
PreviewFullscreen
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.