角度，在鼠标事件上使用画布绘制多个矩形

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

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

canvas.addEventListener("mousedown", function(event) {
  var rectX = event.clientX - canvas.offsetLeft;
  var rectY = event.clientY - canvas.offsetTop;
  var rectWidth = 50;
  var rectHeight = 50;
  
  ctx.fillRect(rectX, rectY, rectWidth, rectHeight);
});

var rectangles = [];

canvas.addEventListener("mousedown", function(event) {
  var rectX = event.clientX - canvas.offsetLeft;
  var rectY = event.clientY - canvas.offsetTop;
  var rectWidth = 50;
  var rectHeight = 50;
  
  rectangles.push({x: rectX, y: rectY, width: rectWidth, height: rectHeight});
  
  drawRectangles();
});

function drawRectangles() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  for (var i = 0; i < rectangles.length; i++) {
    var rect = rectangles[i];
    ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
  }
}