hey I have a canvas element where ships are on it and I would need exactly the same we here in the example https://codepen.io/pierrebleroux/pen/gGpvxJ without frameworks but I don’t know how to do it

here ist my code https://codepen.io/cleks/pen/xxrzbLQ

move functiont

function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // mousedown stuff here
      lastX=mouseX;
      lastY=mouseY;
      mouseIsDown=true;

    }

    function handleMouseUp(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // mouseup stuff here
      mouseIsDown=false;
    }


    function handleMouseMove(e){
      if(!mouseIsDown){ return; }

      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);


      // mousemove stuff here
      for(var i=0;i<ships.length;i++){
          var ship=ships[i];
          drawShip(ship);
          if(ctx.isPointInPath(lastX,lastY)){ 
              ship.x+=(mouseX-lastX);
              ship.y+=(mouseY-lastY);
              ship.right=ship.x+ship.width;
              ship.bottom=ship.y+ship.height;
          }
      }
      lastX=mouseX;
      lastY=mouseY;
      drawAllShips();
    }