二つのcanvasに対するキー操作を分けたい

Question

htmlに二つのキャンバスを設置し、それぞれに対するキー操作を定義しているのですが、一度に片方のキャンバスのみ操作できるようにするにはどうコードを書いたらいいでしょう。
そもそも、focus()メソッドを適用しているときのみキー操作が有効になる、というような話を聞いた記憶があるのですが、とくにそれがなくても機能する場合もありますし、そのあたりの事情がよくわかりません。
キー操作のコードは例えば以下のようなもので、迷路作成によく使用しています。
canvasのキー操作の例
上のコードのようなものを二個以上設置する予定です。

Answer 1

キーボード操作対象が2つあると、「現在どちらがキーボード操作対象か」を管理する必要があります。グローバル変数などで管理してもよいですが、HTMLの世界でキーボード操作の対象を示すのが focus なので、それを適用するのが最も素直な実装です。documenet.activeElment で focus 状態の要素を取得することができます。

focus()メソッドを適用しているときのみキー操作が有効になる

要素が focus 状態のときだけ、その要素の addEventListener()でキーボードイベントを受け取れます。document.addEventListener() では要素のfocus状態に関わらずキーボードイベントを受け取ることができます。

Comments

[justmeet0924]

大変わかりやすい回答ありがとうございました。
また機会をいただけるようでしたら、是非回答お願いします。