Desynchronized 2D canvas
getContext('2d', { desynchronized: true }) は合成処理をバイパスし、ペン入力など低レイテンシが求められる描画に使用します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
api.HTMLCanvasElement.getContext.2d_context.options_desynchronized_parameter | 81 | 79 | | 15 | 75 | 15 |
注釈 4件
実装メモ
- ChromeOSとWindows
- ChromeOSのみ
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (81)
基本構文
JAVASCRIPT
const ctx = canvas.getContext('2d', { desynchronized: true });
// Skip compositing for low-latency rendering
ctx.lineWidth = 2;
ctx.strokeStyle = '#000';ライブデモ
Low-latency drawing hint
Describe the desynchronized hint used for responsive drawing surfaces.
プレビュー全画面表示
Latency trade-offs
Explain that low-latency hints may interact with compositing and rendering guarantees.
プレビュー全画面表示
実務での使いどころ
-
Desynchronized 2D canvas の活用
Canvas 2Dの非同期描画オプション。低レイテンシ描画に使用。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。