Desynchronized 2D canvas

概要

getContext('2d', { desynchronized: true }) は合成処理をバイパスし、ペン入力など低レイテンシが求められる描画に使用します。

対応ブラウザ

基本構文

const ctx = canvas.getContext('2d', { desynchronized: true });
// 合成をスキップして低レイテンシ描画
ctx.lineWidth = 2;
ctx.strokeStyle = '#000';

実務での使いどころ

• Desynchronized 2D canvas の活用

  Canvas 2Dの非同期描画オプション。低レイテンシ描画に使用。

注意点

アクセシビリティ

• スクリーンリーダーでの読み上げを確認すること。

参考リンク

• MDN Web Docs — Desynchronized 2D canvas