允许用户使用Javascript在画布中使用鼠标绘制矩形

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

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

canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", drawRectangle);
canvas.addEventListener("mouseup", stopDrawing);

var isDrawing = false;
var startX, startY;

function startDrawing(event) {
  isDrawing = true;
  startX = event.clientX - canvas.offsetLeft;
  startY = event.clientY - canvas.offsetTop;
}

function drawRectangle(event) {
  if (!isDrawing) return;
  
  var currentX = event.clientX - canvas.offsetLeft;
  var currentY = event.clientY - canvas.offsetTop;
  
  var width = currentX - startX;
  var height = currentY - startY;
  
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(startX, startY, width, height);
}

function stopDrawing() {
  isDrawing = false;
}