contextlost and contextrestored
CanvasRenderingContext2D.isContextLost() はキャンバス 2D API のメソッドで、この描画コンテキストが失われている場合（そしてリセットされていない場合）に true を返します。 これは、ドライバーのクラッシュやメモリー不足などによって発生することがあります。
ユーザーエージェントがキャンバスのバッキングストレージが失われたことを検出した場合、 contextlost イベント を関連付けられた HTMLCanvasElement に対して発生させます。 このイベントがキャンセルされなかった場合、バッキングストレージをデフォルト状態にリセットしようと試みます（これは CanvasRenderingContext2D.reset() を呼び出すことに相当します）。 成功すると、contextrestored イベント が発生し、コンテキストが再初期化および再描画の準備が整ったことを示します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 99 | 99 | 125 | | 99 | | |
| DOM API | ||||||
| contextlost はキャンバス API のイベントで、 CanvasRenderingContext2D コンテキストに関連付けられたバックストレージが失われたことをユーザーエージェントが検出すると、発行されます。 コンテキストは、ドライバーのクラッシュやアプリケーションのメモリー不足など、いくつかの理由で失われることがあります。 | 99 | 99 | 125 | | 99 | |
| contextrestored はキャンバス API のイベtので、ユーザーエージェントが CanvasRenderingContext2D のバッキングストレージを復元した場合に発行されます。 | 99 | 99 | 125 | | 99 | |
| contextlost は OffscreenCanvas インターフェイスのイベントで、ブラウザーが OffscreenCanvasRenderingContext2D コンテキストが失われたことを検出すると発行されます。 コンテキストは、関連付けられた GPU ドライバのクラッシュ、アプリケーションのメモリー不足、といった具合に、いくつかの理由で失われることがあります。 | 99 | 99 | 125 | | 99 | |
| contextrestored は OffscreenCanvas インターフェイスのイベントで、ブラウザーが前回失われた OffscreenCanvasRenderingContext2D コンテキストを復元した場合に発行されます。 | 99 | 99 | 125 | | 99 | |
| CanvasRenderingContext2D.isContextLost() はキャンバス 2D API のメソッドで、この描画コンテキストが失われている場合（そしてリセットされていない場合）に true を返します。 これは、ドライバーのクラッシュやメモリー不足などによって発生することがあります。 | 99 | 99 | 125 | | 99 | |
基本構文
const canvas = document.getElementById('c');
canvas.addEventListener('contextlost', (e) => {
e.preventDefault(); // Attempt to restore
});
canvas.addEventListener('contextrestored', () => {
redraw(); // Redraw
});ライブデモ
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.
実務での使いどころ
-
contextlost and contextrestored の活用
CanvasRenderingContext2D.isContextLost() はキャンバス 2D API のメソッドで、この描画コンテキストが失われている場合（そしてリセットされていない場合）に true を返します。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。