HTML5 CanvasでaddEventListenerを使ってkeydownイベントを取得する方法

HTML5 Canvasでキーボードイベントを受け取るには

HTML5の<canvas>要素は、デフォルトの状態ではキーボードフォーカスを受け取ることができません。そのため、Canvas上でkeydownイベントを監視したい場合は、Canvas要素にtabindex属性を設定する必要があります。

tabindex属性の役割

tabindex属性を指定すると、通常はフォーカス対象にならない要素でも、キーボード操作によるフォーカスを受け取れるようになります。Canvasにこの属性を付与することで、Canvasがアクティブな要素として認識され、キーイベントを捕捉できるようになります。

HTML側の記述例は以下のとおりです。

<canvas id="canvas" width="300" height="150" tabindex="1"></canvas>

JavaScriptの実装コード例

次のサンプルコードでは、マウスでクリックされた要素を記録し、その要素がCanvasである場合にのみkeydownイベントを処理します。

var myTarget, myCanvas;

window.onload = function() {
   myCanvas = document.getElementById('canvas');
   document.addEventListener('mousedown', function(event) {
      myTarget = event.target;
      alert('This is mousedown event.');
   }, false);

   document.addEventListener('keydown', function(event) {
      if(myTarget == myCanvas) {
         alert('This is keydown event.');
      }
   }, false);
}

コードの解説

window.onload：ページの読み込みが完了した時点で処理を開始します。これにより、DOM要素が確実に取得できる状態になります。

mousedownイベント：ドキュメント全体でマウスのクリックを監視し、クリックされた要素（event.target）を変数myTargetに記録します。

keydownイベント：キーが押された際に、直前にクリックされた要素がCanvasと一致するかどうかを判定します。一致する場合のみアラートを表示するため、Canvas以外の要素が選択されているときにはキーイベントが無視されます。

このように、tabindex属性とクリック時の対象判定を組み合わせることで、Canvasにフォーカスがあるときだけキーボード操作に反応する、自然なインタラクションを実現できます。キーボード操作を伴うゲームや描画アプリなどで活用できるテクニックです。