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.
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.