Desynchronized WebGL2 canvas
The optional desynchronized parameter of a canvas's getContext() method permits the browser to draw a WebGL2 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 WebGL2 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.webgl2_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('webgl2', {
desynchronized: true,
preserveDrawingBuffer: true
});Live demo
WebGL2 low-latency hint
Apply desynchronized rendering ideas to WebGL2 contexts on supported platforms.
Typical scenarios
Use low-latency rendering when pointer or sensor motion should feel immediate.
Platform reminder
GPU, driver, and browser differences still determine the final behavior.
Use cases
Use Desynchronized WebGL2 canvas
Use Desynchronized WebGL2 canvas when standard HTML needs a more specific platform feature, semantic signal, or browser capability.
Handle edge cases
Apply Desynchronized WebGL2 canvas to solve a focused requirement without redesigning the whole page architecture.
Cautions
- Test Desynchronized WebGL2 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 WebGL2 canvas supports the intended task without making the page harder to perceive, understand, or operate.
Related links
Powered by web-features