Offscreen canvas
OffscreenCanvas はメインスレッドやWeb Worker内でオフスクリーン描画を行えます。UIブロックを避けた重い描画処理に有用です。
概要
OffscreenCanvas はメインスレッドやWeb Worker内でオフスクリーン描画を行えます。UIブロックを避けた重い描画処理に有用です。
対応ブラウザ
デスクトップ
Chrome 69+
Edge 79+
Safari 16.4+
Firefox 105+
モバイル
Chrome Android 69+
Safari iOS 16.4+
Firefox Android 105+
基本構文
JAVASCRIPT
const offscreen = new OffscreenCanvas(256, 256);
const ctx = offscreen.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 256, 256);
const bitmap = offscreen.transferToImageBitmap();実務での使いどころ
-
Offscreen canvas の活用
メインスレッド外でCanvas描画を行うAPI。Workerでの描画に使用。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。