HTMLのCanvas（キャンバス）からピクセルカラーを取得する方法

キャンバスからピクセルカラーを取得する基本

HTML5のCanvasで特定座標のピクセルカラーを取得したい場合は、まず getImageData() メソッドを使って画像データを取得し、そこからRGBA値を読み出します。

以下のコードは、指定した座標 (x, y) のピクセルカラーをRGBA形式で取得する例です。

var index = (Math.floor(y) * canvasWidth + Math.floor(x)) * 4

// RGBA形式でカラーを取得
var r = data[index];     // 赤（Red）
var g = data[index + 1]; // 緑（Green）
var b = data[index + 2]; // 青（Blue）
var a = data[index + 3]; // アルファ（透明度）

コードの解説

画像データは「幅 × 高さ × 4」の要素を持つ配列として格納されています。各ピクセルは赤・緑・青・アルファの4つの値で構成されるため、目的のピクセル位置は次の式で計算します。

index = (y座標 × キャンバスの幅 + x座標) × 4

小数点の座標に対応するため、Math.floor() で整数に丸めている点にも注目してください。取得した4つの値を組み合わせれば、rgba(r, g, b, a) の形式でCSSなどにそのまま利用できます。

実装のポイント

• 頻繁に色を取得する場合は、毎回 getImageData() を呼ぶとパフォーマンスが低下するため、画像データは一度だけ取得して使い回すのが効率的です。
• 別ドメインの画像を描画したキャンバスでは、セキュリティ制限（同一オリジンポリシー）により getImageData() がエラーになることがあります。crossorigin 属性の設定やCORS対応が必要です。
• 単一ピクセルだけが必要な場合は、ctx.getImageData(x, y, 1, 1) のように範囲を絞るとメモリの節約になります。