在鼠标位置绘制矩形和形状渲染矩形

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

// 获取Canvas元素
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 监听鼠标移动事件
canvas.addEventListener("mousemove", function(event) {
  // 获取鼠标位置
  var x = event.clientX - canvas.offsetLeft;
  var y = event.clientY - canvas.offsetTop;

  // 清空Canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制矩形
  ctx.fillStyle = "red";
  ctx.fillRect(x, y, 100, 100);

  // 绘制形状
  ctx.beginPath();
  ctx.moveTo(x + 50, y);
  ctx.lineTo(x + 100, y + 100);
  ctx.lineTo(x, y + 100);
  ctx.closePath();
  ctx.fillStyle = "blue";
  ctx.fill();
});