Javascript 图像中的画布悬停函数

如何在图像中复制悬停功能？我在canvas/Js的世界里是如此的无名小卒，我想做一个canvas游戏，但我不能做悬停部分，我尝试了elem。addEventListener，id，卡中的函数，但我没有解决，请有人知道如何解决

    var elem = document.getElementById("canvas"),
    ctx = elem.getContext("2d"),
    elemLeft = elem.offsetLeft,
    elemTop = elem.offsetTop,
    x1  = 0,
    x2  = 30,

    last = performance.now();
    let img = new Image();
    elem.addEventListener('click', function onClickCanvas(event) {
      console.log(
        "clientX: " + event.clientX +
        " - clientY: " + event.clientY);
        if (event.clientX >= 0
            && event.clientX <= 910
            && event.clientY >= 30
            && event.clientY <= 550 ) {
              alert("hit")}
    });
    elem.addEventListener('mouseover',function onMouuseoverCanvas(event){
      console.log(
        "clientXa: " + event.clientX +
        " - clientYa: " + event.clientY);
        if(event.clientX >= 0
            && event.clientX <= 910
            && event.clientY >= 30
            && event.clientY <= 550 ) {
              function ampliar(y){
                y.style.height = "20000px";}
            }

    });
    ctx.addId({id: 'hover'});ctx.onmouseover = function() {mouseOver()};
    ctx.addId({id: 'hover'});ctx.onmouseout = function() {mouseOut()};

    function mouseOver() {
      ctx.addId({id: 'hover'});ctx.scale(0.6, 0.6);
    }

    function mouseOut() {
      ctx.addId({id: 'hover'});ctx.scale(0.6, 0.6);
    }
    img.onload = function() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       ctx.beginPath();
       ctx.save();ctx.drawImage(img, x1, y);ctx.clip();ctx.addId({id: 'hover'});ctx.restore();
       ctx.save();ctx.drawImage(img, x2, y);ctx.clip();ctx.addId({id: 'hover'});ctx.restore();

---

var elem=document.getElementById（“画布”），
ctx=elem.getContext（“2d”），
elemLeft=elem.offsetLeft，
elemTop=elem.offsetTop，
x1=0，
x2=30，
last=performance.now（）；
设img=新图像（）；
元素addEventListener（'click'，函数onClickCanvas（事件）{
console.log(
“clientX:+event.clientX+
“-clientY:”+event.clientY）；
如果（event.clientX>=0
&&event.clientX=30
&&event.clientY=0
&&event.clientX=30
&&event.clientY在哪里定义了
elem
呢？它在最上面，我忘了在代码中加上：var elem=document.getElementById（“canvas”），ctx=elem.getContext（“2d”），elemLeft=elem.offsetLeft，elemTop=elem.offsetTop，