Javascript 将单击事件添加到画布上的图像

我已经创建了一个画布，并在上面添加了一个图像。我想向该图像添加一个单击事件。下面是我的代码

<canvas id="myCanvas" width="578" height="1000"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  //This code is for adding leftArrow icon
  var leftArrow = new Image();
  leftArrow.src = "leftArrow.jpg";

  leftArrow.addEventListener("click",function(){alert("hello");},false); //this is not working

  leftArrow.onclick=function(){alert("image click");}

    drawScreen();


  function drawScreen() {
    //context.drawImage(leftArrow, 218, 482);//leftArrow
    leftArrow.onload = function(){
              context.drawImage(leftArrow, 218, 482);
    }
  }

</script>

我想将事件添加到其单击中

您正在左箭头上指定单击事件。在画布上绘制leftArrow时，复制的是图像内容，而不是事件

---

事实上，新图像与document.createElementimg大致相同-您将获得一个属性。图像以异步方式加载，并且有可能在设置onload事件之前加载。

谢谢您的回答，但我希望单击事件仅在单击图像时发生，而不是在整个画布上。该画布上没有图像。整个画布是一个图像。您唯一能做的就是使用来计算它是否在箭头上。通过使用画布渲染，您基本上放弃了DOM的所有优点。因此，我必须再次找到画布上单击发生位置的坐标，如果坐标与图像的坐标匹配，我将在那里添加我的函数。是吗？是的。我强烈建议您尝试将arrow呈现为单独的HTML元素。你知道吗？@PatrickEvans我看到了链接，发现答案并不令人满意。非常感谢。

canvas.addEventListener("click", function() {alert("click");});

var x,y; //Click offsets, here I assume they already have the value
var posx, posy; //Position of the arrow, the values you used as .drawImage parameters
var endx = posx + leftArrow.width;
var endy = posy + leftArrow.height;
if( (x>posx && y>posy) && (x<endx && y<endy) )
   alert("Arrow was clicked!");