Canvas API
読み: きゃんばすえーぴーあい
HTML5 の canvas 要素を通じてブラウザ上でピクセル単位の描画や画像操作を行うための JavaScript API。
Canvas API は HTML5 で導入された描画インターフェースであり、<canvas> 要素上に JavaScript でピクセル単位のグラフィックスを描画できる。2D コンテキスト (getContext('2d')) を取得し、パス描画、テキスト描画、画像合成、ピクセル操作などを行う。
画像処理の文脈では、drawImage() で画像を描画し、getImageData() でピクセルデータ (RGBA 配列) を取得して加工する手法が基本となる。フィルタ適用、色調補正、トリミング、リサイズなどの処理をサーバーに送信せずクライアント側で完結できる点が大きな利点である。
画像圧縮ツールやリサイズツールの多くは内部で Canvas API を利用している。toBlob() や toDataURL() で加工結果を JPEG/PNG/WebP として書き出せる。大きな画像の処理ではメインスレッドをブロックするため、OffscreenCanvas と Web Worker の併用が推奨される。