contextlost and contextrestored
The contextlost event for <canvas> fires when the canvas backing storage is lost, while the contextrestored event fires when it is recreated. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The contextlost event for <canvas> fires when the canvas backing storage is lost, while the contextrestored event fires when it is recreated. 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 | |
| 99 | 99 | 125 | | 99 | | |
| DOM API | ||||||
| The contextlost event of the Canvas API is fired if the user agent detects that the backing storage associated with a CanvasRenderingContext2D context is lost. Contexts can be lost for several reasons like driver crashes or the application runs out of memory, etc. | 99 | 99 | 125 | | 99 | |
| The contextrestored event of the Canvas API is fired if the user agent restores the backing storage for a CanvasRenderingContext2D. | 99 | 99 | 125 | | 99 | |
| The contextlost event of the OffscreenCanvas interface is fired if the browser detects that the OffscreenCanvasRenderingContext2D context is lost. Contexts can be lost for several reasons, such as an associated GPU driver crashes, or the application runs out of memory, and so on. | 99 | 99 | 125 | | 99 | |
| The contextrestored event of the OffscreenCanvas interface is fired if the browser restores an OffscreenCanvasRenderingContext2D context that was previously lost. | 99 | 99 | 125 | | 99 | |
| The CanvasRenderingContext2D.isContextLost() method of the Canvas 2D API returns true if the rendering context is lost (and has not yet been reset). This might occur due to driver crashes, running out of memory, and so on. | 99 | 99 | 125 | | 99 | |
Syntax
const canvas = document.getElementById('c');
canvas.addEventListener('contextlost', (e) => {
e.preventDefault(); // Attempt to restore
});
canvas.addEventListener('contextrestored', () => {
redraw(); // Redraw
});Live demo
Lose and restore
Use the WEBGL_lose_context extension to simulate context loss and restoration.
Recovery guidance
Pair the canvas lifecycle with a short checklist for restoring resources.
Use cases
Draw custom visuals
Use contextlost and contextrestored when browser rendering surfaces need more control for charts, media, or interactive graphics.
Support advanced rendering
Apply contextlost and contextrestored where GPU-backed or low-level drawing improves the experience.
Cautions
- Test contextlost and contextrestored 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 contextlost and contextrestored supports the intended task without making the page harder to perceive, understand, or operate.
Related links
Powered by web-features