回答

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Canvas拖动方块</title>
</head>

<body>

    <canvas id="canvas" width="500" height="500" style="border:1px solid red;"></canvas>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        
        let startX, startY; 
        let isDrawing = false;
     
        const rects = [];
        
      
        let selectedSquare = null;
            let offsetX, offsetY;
    
      function findSquare(x, y) {
          
         
                for (let i = rects.length - 1; i >= 0; i--) {
                    const square = rects[i];
                    if (x >= square.x && x <= square.x + square.w &&
                        y >= square.y && y <= square.y + square.h) {
                        return square;
                    }
                }
                return null;
            }
        
        canvas.addEventListener('mousedown', (e) => {
             const mouseX = e.clientX - canvas.getBoundingClientRect().left;
                const mouseY = e.clientY - canvas.getBoundingClientRect().top;
                selectedSquare = findSquare(mouseX, mouseY);
                if (selectedSquare) {
                       console.log("drag start");
                    offsetX = mouseX - selectedSquare.x;
                    offsetY = mouseY - selectedSquare.y;
                }else{
                      startX = e.offsetX;
                      startY = e.offsetY;
                      isDrawing = true;
                }
    
     
        });
        
        canvas.addEventListener('mousemove', (e) => {
              if (selectedSquare) {
                  console.log("drag");
                     const mouseX = e.clientX - canvas.getBoundingClientRect().left;
                    const mouseY = e.clientY - canvas.getBoundingClientRect().top;
                    selectedSquare.x = mouseX - offsetX;
                    selectedSquare.y = mouseY - offsetY;
              }else{
                   if(!isDrawing) return;
          
                      const x = e.offsetX;
                      const y = e.offsetY;
                      const w = x - startX;
                      const h = y - startY;
                      
                      drawRect(startX, startY, w, h);
              }
    
         
        });
        
        canvas.addEventListener('mouseup', (e) => {
            if(selectedSquare){
                selectedSquare = null;
            }else{
                 isDrawing = false;
                  rects.push({
                    x: startX, 
                    y: startY,
                    w: e.offsetX - startX,
                    h: e.offsetY - startY
                  });
            }
            
         
        });
    
        function drawRect(x, y, w, h) {
          ctx.beginPath();
          ctx.rect(x, y, w, h);
          ctx.fill();
        }
    
    
        function update() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          
          for(let rect of rects) {
            drawRect(rect.x, rect.y, rect.w, rect.h);  
          }
          
         
    
          requestAnimationFrame(update);
        }
    
        update();
    </script>

</body>

</html>