HTML5のCanvas要素にクリックイベントハンドラーを追加する方法を解説

Canvas要素内に描画された図形は、DOM上に個別の要素として存在しません。Canvasに描かれたものは、ピクセルとその色情報だけで構成されており、描画は即時モード（イミディエートモード）でビットマップとして行われます。そのため、Canvas上の特定の図形に対してクリックイベントを取得したい場合は、CanvasというHTML要素自体のクリックイベントを捕捉し、その座標から「どの図形がクリックされたのか」を自分で判定する必要があります。この判定を行うには、各図形の幅（width）と高さ（height）の情報をあらかじめ保持しておくことがポイントです。

Canvasにクリックイベントを追加する基本のコード

Canvas要素にクリックイベントを追加するには、以下のようにaddEventListener()を使用します。

canvas.addEventListener('click', function() { }, false);

クリックされた図形を判定する実装例

次のコード例では、クリックされた座標を計算し、保持している図形の情報と照合することで、どの図形がクリックされたかを判定しています。

var e = document.getElementById('myCanvas'),
    elemLeft = e.offsetLeft,
    elemTop = e.offsetTop,
    context = e.getContext('2d'),
    elements = [];

// クリックイベントのリスナーを登録
e.addEventListener('click', function(event) {
    var xVal = event.pageX - elemLeft,
    yVal = event.pageY - elemTop;
    console.log(xVal, yVal);
    elements.forEach(function(ele) {
        if (yVal > ele.top && yVal < ele.top + ele.height && xVal > ele.left && xVal < ele.left + ele.width) {
            alert('要素がクリックされました');
        }
    });
}, false);

elements.push({
    colour: '#1C2128',
    width: 250,
    height: 200,
    top: 30,
    left: 20
});

elements.forEach(function(ele) {
    context.fillStyle = ele.colour;
    context.fillRect(ele.left, ele.top, ele.width, ele.height);
});

コードの解説

このコードの処理の流れは以下のとおりです。

1. Canvasの位置情報を取得
offsetLeftとoffsetTopで、ページ上におけるCanvasの左上の座標を取得します。

2. クリック座標の算出
event.pageXとevent.pageYからCanvasの位置を差し引くことで、Canvas内の相対的なクリック座標（xVal、yVal）を求めます。

3. 図形情報との照合
elements配列に格納された各図形のtop、left、width、heightと照合し、クリック座標が図形の範囲内に含まれるかどうかを判定します。範囲内であれば、クリックされたと判断してアラートを表示します。

4. 図形の描画
fillRect()を使って、登録した図形情報に基づいてCanvas上に矩形を描画します。

このように、Canvas内の図形へのクリック判定は「座標の計算」と「図形情報の保持」を組み合わせることで実現できます。図形の数が多い場合や複雑な形状を扱う場合は、当たり判定用のライブラリを活用するのも有効な手段です。