contextlost and contextrestored
contextlost / contextrestored イベントにより、Canvas 2D コンテキストがGPUリソース不足などで失われた際の復旧処理を実装できます。
概要
contextlost / contextrestored イベントにより、Canvas 2D コンテキストがGPUリソース不足などで失われた際の復旧処理を実装できます。
対応ブラウザ
デスクトップ
Chrome 99+
Edge 99+
Safari 未対応
Firefox 125+
モバイル
Chrome Android 99+
Safari iOS 未対応
Firefox Android 125+
基本構文
JAVASCRIPT
const canvas = document.getElementById('c');
canvas.addEventListener('contextlost', (e) => {
e.preventDefault(); // 復元を試みる
});
canvas.addEventListener('contextrestored', () => {
redraw(); // 再描画
});実務での使いどころ
-
contextlost and contextrestored の活用
Canvasコンテキストの喪失・復元イベント。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。