質問: e.clientY - button.top; if(x < mouseX && mouseX < x + width){ if(y < mouseY && mouseY < y + height){ *ここに処理を書く } ``` 現在理解していることは、 1キャンバスのクリックされた相対座標の取得方法 2Canvasを重ねた場合、クリックイベントは一番上にあるキャンバスしか反応しない 3if関数を用いて、クリックの範囲を指定することで、ボタンやキャラクターなどにクリック判定を擬似的につけることができる。 4Canvasのイベントリスナーは一番上のCanvasしか反応しない。 ということです。 しかしながら、ボタンの実装とキャラクターの描画をそれぞれ別のレイヤーにかき分けた場合、反応するのは「一番上のCanvas」だけなので、ボタンがクリックに反応するようにすると、別レイヤーに描画したキャラクターをクリックしてもイベントが発火しなくなってしまいます。 ### 実現したいこと こちらがしたいこととしては、ボタンもキャラクターもクリック判定を実装したいのですが、これはCanvasの技術的に不可能なことなのでしょうか? 自らの技術力を上げたいため、できればライブラリーを使用しないようにしたいです。
回答: 一番上のCanvasのクリックイベントリスナーで、すべてのレイヤーのオブジェクトのクリック判定を行えばよいのではないでしょうか? もちろんそのままやると、別のレイヤーに存在するオブジェクトが重なっているところをクリックしたときに、どちらのオブジェクトもクリックされたという判定になるので、もしそれを避けたいならば 1. 一番上のレイヤーのクリック判定 ↓もしどのオブジェクトもクリックされなかったら 2. 二番目のレイヤーのクリック判定 ↓もしどのオブジェクトもクリックされなかったら ... とすればいいと思います。