有没有办法把矩形内的所有东西都和矩形一起移动？

<canvas id="myCanvas" width="500" height="300"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var rectX = 100; // 矩形的初始X坐标
var rectY = 100; // 矩形的初始Y坐标
var offsetX = 0; // 鼠标或触摸移动的偏移量X
var offsetY = 0; // 鼠标或触摸移动的偏移量Y
var isDragging = false; // 是否正在拖动矩形

function drawRectangle() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
  ctx.fillStyle = "#ff0000"; // 设置矩形颜色为红色
  ctx.fillRect(rectX, rectY, 100, 100); // 绘制矩形
}

function handleMouseDown(e) {
  var mouseX = e.clientX - canvas.offsetLeft; // 获取鼠标点击位置的X坐标
  var mouseY = e.clientY - canvas.offsetTop; // 获取鼠标点击位置的Y坐标
  // 判断鼠标点击位置是否在矩形内部
  if (mouseX >= rectX && mouseX <= rectX + 100 &&
      mouseY >= rectY && mouseY <= rectY + 100) {
    offsetX = mouseX - rectX; // 计算鼠标点击位置相对矩形左上角的偏移量X
    offsetY = mouseY - rectY; // 计算鼠标点击位置相对矩形左上角的偏移量Y
    isDragging = true; // 标记开始拖动矩形
  }
}

function handleMouseMove(e) {
  if (isDragging) {
    rectX = e.clientX - canvas.offsetLeft - offsetX; // 计算矩形的新X坐标
    rectY = e.clientY - canvas.offsetTop - offsetY; // 计算矩形的新Y坐标
    drawRectangle(); // 重新绘制画布
  }
}

function handleMouseUp() {
  isDragging = false; // 标记停止拖动矩形
}

canvas.addEventListener("mousedown", handleMouseDown);
canvas.addEventListener("mousemove", handleMouseMove);
canvas.addEventListener("mouseup", handleMouseUp);

drawRectangle(); // 绘制初始画布