如何使用javascript Canvas添加Hover功能

<canvas id="myCanvas" width="800" height="600"></canvas>

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

context.fillStyle = 'red';
context.fillRect(50, 50, 100, 100);

canvas.addEventListener('mousemove', handleMouseMove);

function handleMouseMove(event) {
  // 获取鼠标位置
  const mouseX = event.clientX - canvas.offsetLeft;
  const mouseY = event.clientY - canvas.offsetTop;

  // 检测鼠标是否悬停在矩形内
  if (mouseX >= 50 && mouseX <= 150 && mouseY >= 50 && mouseY <= 150) {
    // 鼠标悬停在矩形内，执行相应的操作
    // 例如，改变矩形颜色
    context.fillStyle = 'blue';
    context.fillRect(50, 50, 100, 100);
  } else {
    // 鼠标未悬停在矩形内，恢复原始状态
    context.fillStyle = 'red';
    context.fillRect(50, 50, 100, 100);
  }
}