HTML5 Canvasでベジェパス形状のクリック（ヒット）を検出する方法

HTML5のCanvasで描画したベジェパス形状がクリックされたかどうかを判定したい場面は少なくありません。本記事では、getImageData()を使ったピクセル単位のヒットテスト手法を、実際のコード例とともにわかりやすく解説します。

基本的な考え方：ピクセルのアルファ値で当たり判定を行う

ベジェ曲線のような複雑な形状は、数学的に交点を計算して当たり判定を行うのが難しい場合があります。そこで有効なのが「ピクセルを読み取る方式」です。具体的には、次の手順で判定します。

1. マウス座標（mx, my）に対応する1×1ピクセルの画像データを取得する
2. そのピクセルのアルファ値（透明度）を確認する
3. アルファ値が0より大きければ、その位置には何らかの図形が描画されている＝クリックされたと判断できる

この方法なら、ベジェパスだけでなく任意の複雑な形状に対しても、シンプルなコードで正確なヒット検出が可能になります。

実装例

以下は、複数の図形（boxes）を後ろから順に走査し、クリック位置に図形があるかどうかを判定するサンプルコードです。

var l = boxes.length;
for (var i = l - 1; i >= 0; i--) {
    // 図形を一時的なコンテキスト（gctx）に描画
    drawshape(gctx, boxes[i], 'black', 'black');

    // クリック位置の1×1ピクセルのデータを取得
    var imgData = gctx.getImageData(mx, my, 1, 1);
    var index = (mx + my * imgData.width) * 4;

    // アルファ値が0より大きければ、図形の上をクリックしている
    if (imgData.data[3] > 0) {
        mySel = boxes[i];
        offsetx = mx - mySel.x;
        offsety = my - mySel.y;
        mySel.x = mx - offsetx;
        mySel.y = mx - offsety;
        isDrag = true;
        canvas.onmousemove = myMove;
        invalidate();
        clear(gctx);
        return;
    }
}

コードのポイント解説

1. 後ろの図形から順にチェックする

ループを配列の末尾（i = l - 1）から先頭に向かって回すことで、最前面に描画されている図形から優先的に判定できます。これにより、図形が重なっている場合でも、見た目どおりの図形を選択できます。

2. getImageData()でピクセル情報を取得

gctx.getImageData(mx, my, 1, 1)は、指定座標の1ピクセル分だけRGBAのデータを取り出します。配列の4番目の要素（インデックス3）がアルファ値に相当し、0なら完全に透明、0より大きければ何かが描かれていることを意味します。

3. ヒット時の処理

図形が検出できたら、その図形を選択状態（mySel）にし、ドラッグ用のオフセットを計算します。さらにcanvas.onmousemoveに移動処理を割り当てて、図形をドラッグで動かせるようにしています。最後にinvalidate()で再描画を促し、作業用コンテキストをクリアして終了します。

注意点

• パフォーマンス： getImageData()は比較的コストの高い処理のため、頻繁に呼び出す場合はオフスクリーンCanvasを活用するなどの工夫が有効です。
• 座標系： マウスイベントの座標はCanvas上の座標に変換してから使う必要があります（getBoundingClientRect()などを利用）。
• セキュリティ制限： 別ドメインの画像を描画したCanvasでは、同一生成元ポリシーによりgetImageData()が例外をスローすることがあります。

このように、ピクセルのアルファ値を利用したヒットテストは、ベジェパスを含むあらゆる形状のクリック検出に応用できる強力なテクニックです。ぜひ自分のプロジェクトでも試してみてください。