Limited support Use with care and provide a fallback when broad support matters.

contextlost and contextrestored

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.

If the user agent detects that the canvas backing storage is lost it will fire the contextlost event at the associated HTMLCanvasElement. If this event is not cancelled it will attempt to reset the backing storage to the default state (this is equivalent to calling CanvasRenderingContext2D.reset()). On success it will fire the contextrestored event, indicating that the context is ready to reinitialize and redraw.

Canvas and graphics

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
api.CanvasRenderingContext2D.isContextLost
99
99
125
99
DOM API
contextlost_event

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
contextrestored_event

The contextrestored event of the Canvas API is fired if the user agent restores the backing storage for a CanvasRenderingContext2D.
99
99
125
99
contextlost_event

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
contextrestored_event

The contextrestored event of the OffscreenCanvas interface is fired if the browser restores an OffscreenCanvasRenderingContext2D context that was previously lost.
99
99
125
99
isContextLost

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
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

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

PreviewFullscreen

Event log

Record context lifecycle messages in a visible log for debugging.

PreviewFullscreen

Recovery guidance

Pair the canvas lifecycle with a short checklist for restoring resources.

PreviewFullscreen

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