drawImageでロードした画像にaddEventListenerでクリック機能を付けたい

前提・実現したいこと

タイトル通りdrawImageでcanvas内に描画した画像をクリックするとアラートが表示される機能を付けたいのですが、やり方がわかりません。
描画したい画像は.onloadで読み込んでいるので、addEventListenerでクリック機能をつけようとしても画像をロードする前に実行されてしまいます。

HTML
1<body>
2    <canvas id="board" width="460" height="460"></canvas>
3
4<script>
5
6  // canvas準備
7  const board = document.querySelector("#board");  //getElementById()等でも可。オブジェクトが取れれば良い。
8  const ctx = board.getContext("2d");
9
10  // 画像読み込み
11  const chara = new Image();
12  chara.src = "mizugi.JPG";  // 画像のURLを指定
13  chara.onload = () => {
14    ctx.drawImage(chara, 0, 0,230,340);
15  };
16
17  chara.addEventListener("click",()=>{
18      window.alert("懺悔しなさい！")
19 });
20
21</script>
22</body>

試したこと

imageClickというアラートを表示させる関数を用意し、addEventListenerの引数をloadに変えることで画像がロードされた後にchara.onclick = imageClickでクリック機能を付けるというコードも試しましたが、こちらもダメでした。

javascript
1 const imageClick = () =>{
2    window.alert("懺悔しなさい！")
3  }
4
5chara.addEventListener("load",()=>{
6     chara.onclick = imageClick;
7 });
8

行動規範の内容に同意します

回答1件

ベストアンサー

clickイベントを加える対象はcharaではなくboardではないでしょうか。

投稿2021/06/26 13:54

itagagaki

総合スコア8402

bob-kitchin

2021/06/26 14:22 編集

2回も回答してくださりありがとうございます。おっしゃる通り、boardを対象にした場合はクリックでアラートが表示されるのですが、その場合画像以外の`canvas`範囲をクリックしてもアラートが表示されてしまいます。今後は`canvas`範囲内に複数の要素を入れようと思っているので、画像の範囲のみをクリックできるようにしたいのです。

itagagaki

2021/06/26 14:48

canvas内に描画した画像はもはやただのビットマップで、DOMオブジェクトではないので、イベントリスナーを加えることはできないのだと思います。canvas要素にclickのイベントリスナーを設定して、渡されたイベントオブジェクトでクリックされた座標を得て、その座標と画像の位置およびサイズから画像内部でのクリックかどうかを判定するしかないでしょう。そして画像の位置とサイズは画像を描画するときに把握しておくしかないでしょうね。

bob-kitchin

2021/06/26 15:11

ありがとうございます。描画した画像にイベントを追加することはできないのですね。

行動規範の内容に同意します