HTML5 Canvasでマウスダウン・マウスアップイベントを処理する方法

HTML5 Canvasでドラッグ操作やクリック操作を実装するには、mousedown（マウスボタンを押した瞬間）とmouseup（マウスボタンを離した瞬間）の2つのイベントを組み合わせて扱うのが基本です。

基本的な実装方法

ポイントは、マウスボタンが押されているかどうかを記録するフラグ変数を用意することです。mousedownでフラグを立て、mouseupでフラグを下ろすことで、「押してから離すまで」の一連の操作を正しく判定できます。

var mouseDown = false;

// mousedownイベントの処理
canvas1.onmousedown = function(event) {
    dragOffset.x = event.clientX - mainLayer.trans.x;
    dragOffset.y = event.clientY - mainLayer.trans.y;
    mouseDown = true;
};

// mouseupイベントの処理
canvas1.onmouseup = function(event) {
    if (mouseDown) {
        mouseClick(event); // クリックとして処理
    }
    mouseDown = false;
};

コードの解説

mousedown時の処理

マウスボタンが押されたタイミングで、ドラッグ開始位置のオフセット（dragOffset）を計算し、フラグ変数 mouseDown を true に設定します。これにより、以降のmousemoveイベントでドラッグ中であることを判別できるようになります。

mouseup時の処理

マウスボタンが離されたタイミングで、mouseDown フラグが立っている場合のみクリック処理（mouseClick）を実行します。これは「押したまま別の場所で離した」といったケースと区別するためです。最後に必ずフラグを false に戻します。

より堅牢な実装のためのヒント

• addEventListener の活用： onmousedown プロパティの代わりに canvas.addEventListener('mousedown', handler) を使うと、複数のハンドラを登録でき、より柔軟な設計が可能です。
• mouseleave への対応： マウスがキャンバス外に移動したままボタンが離された場合、mouseupイベントが発生しないことがあります。mouseleave イベントでもフラグをリセットしておくと安全です。
• タッチデバイスへの対応： スマートフォンやタブレットでは touchstart / touchend イベント、または pointerdown / pointerup イベントを使用することで、同様の処理を統一的に実装できます。

このようにフラグ変数による状態管理を行うことで、Canvas上でのドラッグ＆ドロップやクリック判定など、インタラクティブな描画アプリケーションを簡単に構築できます。