如何使用鼠标在画布上绘制矩形，但在移动鼠标时看到矩形

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

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var rect = {}; // 用于存储矩形的坐标和尺寸信息

canvas.addEventListener("mousemove", function(event) {
  var rectX = event.clientX - canvas.offsetLeft; // 鼠标在Canvas中的X坐标
  var rectY = event.clientY - canvas.offsetTop; // 鼠标在Canvas中的Y坐标

  // 清除之前绘制的矩形
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制新的矩形
  ctx.beginPath();
  ctx.rect(rectX, rectY, rect.width, rect.height);
  ctx.stroke();
});

canvas.addEventListener("mousedown", function(event) {
  var startX = event.clientX - canvas.offsetLeft; // 鼠标按下时的X坐标
  var startY = event.clientY - canvas.offsetTop; // 鼠标按下时的Y坐标

  // 计算矩形的初始位置和尺寸
  rect = {
    x: startX,
    y: startY,
    width: 0,
    height: 0
  };
});

canvas.addEventListener("mouseup", function(event) {
  var endX = event.clientX - canvas.offsetLeft; // 鼠标松开时的X坐标
  var endY = event.clientY - canvas.offsetTop; // 鼠标松开时的Y坐标

  // 计算矩形的最终尺寸
  rect.width = endX - rect.x;
  rect.height = endY - rect.y;

  // 绘制最终的矩形
  ctx.beginPath();
  ctx.rect(rect.x, rect.y, rect.width, rect.height);
  ctx.stroke();
});