質問: "pin.png" //ここの処理(クリックした座標に点をかく)は動作します。 this.ctx.beginPath(); this.ctx.arc(x, y, 5, 0, Math.PI * 2, false); this.ctx.fill(); }); ```
回答: これで動くか確かめていただいても構いませんか?コードを直したものです。 ``` this.canvas.addEventListener("click", (e) => { var that = this // fix: 現在のcanvasへのコンテキストを保存しておく var rect = e.target.getBoundingClientRect() var x = e.clientX - rect.left var y = e.clientY - rect.top //ここの処理が動きません。 var img = new Image() img.onload = function() { //img.srcと、xy座標は正しく取得できています alert(img.src) alert(x,y) that.ctx.drawImage(img, x, y) // fix: thisコンテキストがimgだと思うのでcanvasが取れるようにthatに修正 }; img.src = "pin.png" //ここの処理(クリックした座標に点をかく)は動作します。 this.ctx.beginPath(); this.ctx.arc(x, y, 5, 0, Math.PI * 2, false); this.ctx.fill(); }); ```