Newly available 主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。
Canvas・グラフィクス Newly available

willReadFrequently

getContext('2d', { willReadFrequently: true }) は getImageData() を頻繁に呼び出す場合にパフォーマンスを最適化します。

Canvas・グラフィクス

概要

getContext('2d', { willReadFrequently: true }) は getImageData() を頻繁に呼び出す場合にパフォーマンスを最適化します。

対応ブラウザ

デスクトップ

Chrome 99+
Edge 99+
Safari 18+
Firefox 28+

モバイル

Chrome Android 99+
Safari iOS 18+
Firefox Android 28+

基本構文

JAVASCRIPT 
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d', { willReadFrequently: true });
ctx.fillRect(0, 0, 100, 100);
const data = ctx.getImageData(0, 0, 100, 100);

実務での使いどころ

  • willReadFrequently の活用

    Canvas 2Dコンテキストの読み取り最適化オプション。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

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

参考リンク