はじめに

以前マウスイベントとタッチイベントを併用して、Canvasを実装しました。

その際、ポインターイベント⁽¹⁾の方がより簡単に汎用的な場面に適しているとコメントで教えていただき、今回はその実装の話となります。
結論めちゃくちゃ簡単に実装できます！！

Pointer Events とは？

マウスイベントとタッチイベントを別々に書いていましたが、Pointer Events では「ポインター」という抽象化を用いることで、それぞれのデバイスを同じイベントで処理できます。

代表的なイベントは以下の通りです。

pointerdown: デバイスがアクティブになった（マウスダウン、タッチ開始など）
pointermove: デバイスが移動している（マウス移動、タッチ移動など）
pointerup: デバイスが離れた（マウスアップ、タッチ終了など）
pointerleave: デバイスが要素外に出た

ソースコード

以下が今回実装したサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Pointer Events対応サンプル</title>
  <style>
    #canvas {
      border: 1px solid black;
      touch-action: none;
    }
  </style>
</head>
<body>
  <h1>Pointer Events でお絵描き</h1>
  <canvas id="canvas" width="500" height="300"></canvas>
  <button id="resetBtn">リセット</button>

  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const resetBtn = document.getElementById('resetBtn');

    let drawing = false;

    // 相対座標取得
    function getCanvasPos(e) {
      const rect = canvas.getBoundingClientRect();
      return {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
      };
    }

    // PointerDown: ポインターがアクティブボタン状態なら描画開始
    canvas.addEventListener('pointerdown', (e) => {
      drawing = true;
      ctx.beginPath();
      const pos = getCanvasPos(e);
      ctx.moveTo(pos.x, pos.y);
    });

    // PointerMove: ポインターが移動中なら線を描画
    canvas.addEventListener('pointermove', (e) => {
      if (!drawing) return;
      const pos = getCanvasPos(e);
      ctx.lineTo(pos.x, pos.y);
      ctx.stroke();
    });

    // PointerUp: ポインターがアクティブボタン状態でなくなったら描画終了
    canvas.addEventListener('pointerup', () => {
      drawing = false;
    });

    // PointerLeave: Canvas外に出たら終了
    canvas.addEventListener('pointerleave', () => {
      drawing = false;
    });

    // リセット
    resetBtn.addEventListener('click', () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    });
  </script>
</body>
</html>

上記のコードを .html ファイルとして保存しブラウザで開くとタッチ操作でキャンバス上に絵を描けるようになっているはずです。

おわりに

これで、スマホやタブレットのようなタッチデバイスでもお絵かきができるようになりました。

この記事が参考になりましたらぜひ「いいね」「フォロー」など励みになるのでよろしくお願いします！

参考文献

ポインターイベント (Pointer events) - MDN