Javascript 画布多弧从父弧继承悬停状态（Hitbox问题）

这可能是一个有趣的例子

给出了什么：

• 没有圆角样式但有笔划的圆弧
• 都在同一个坐标上
• 大小不同（可视嵌套）
• 将笔划转换为更亮颜色的鼠标悬停事件

我的问题：

我只想让我的光标实际悬停的弧线亮起来。取而代之的是，外部弧亮起，弧之间的空间（不存在的填充样式）被认为是触发鼠标悬停事件的原因。我希望那片空白被忽略。请看这里：

ctx.clearRect（0，0，canvas.width，canvas.height）；
for（设i=0；i

ctx.clearRect(0, 0, canvas.width, canvas.height);

for(let i = 0; i < MaxRings; i++) {
   ctx.beginPath();
   ctx.arc(width/2, height/2, OrbitSize + (i*50), 0, 2*Math.PI);
   ctx.strokeStyle = ctx.isPointInPath(mouseX, mouseY) ? "#ffffff" : "#555555";
   ctx.stroke();
   ctx.closePath();
}

window.requestAnimationFrame(render);