JS -在画布中围绕鼠标位置制作一个hitbox？

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

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

canvas.addEventListener("mousemove", function(event) {
  var rect = canvas.getBoundingClientRect();
  var mouseX = event.clientX - rect.left;
  var mouseY = event.clientY - rect.top;
  
  // 在这里进行hitbox的绘制和判断
});

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

var hitboxWidth = 50;
var hitboxHeight = 50;
var hitboxX = mouseX - hitboxWidth / 2;
var hitboxY = mouseY - hitboxHeight / 2;

ctx.fillStyle = "red";
ctx.fillRect(hitboxX, hitboxY, hitboxWidth, hitboxHeight);

var isColliding = mouseX >= hitboxX && mouseX <= hitboxX + hitboxWidth &&
                  mouseY >= hitboxY && mouseY <= hitboxY + hitboxHeight;

if (isColliding) {
  console.log("鼠标与hitbox发生碰撞！");
} else {
  console.log("鼠标未与hitbox发生碰撞。");
}