javascript鼠标悬停矩形画布

我正在用Javascript在画布上绘制矩形。当用户将鼠标移到其中一个矩形上时，该矩形中会出现一个文本。仅在该矩形上（即，不在其他矩形上）

所以我设法画出了矩形，并创建了mouseover事件。它工作得非常完美：只要鼠标移动到其中一个矩形上，文本就会出现。但是，文本显示在所有矩形中。。。有没有想过我做错了什么？似乎有一个循环问题，但我似乎无法解决它

function handleMouseMove(e){

    mouseX=parseInt(e.clientX-offsetX);
    mouseY=parseInt(e.clientY-offsetY);

    for(var i=0;i<entities.length;i++){

        var entity=entities[i];

        ctx.rect(entity.x, entity.y, width, height);

        if(ctx.isPointInPath(mouseX,mouseY)){ 

            ctx.font = "10px Arial";
            ctx.fillStyle = "black";
            ctx.textAlign = "left";
            ctx.fillText("edit", entity.x + 5 , entity.y + 5 );

        }

    }
}

功能手柄移动（e）{
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
对于（var i=0；i，
isPointInPath
方法将检查给定的坐标是否在当前路径形成的任何形状中。每个
rect
都添加到相同的单一路径中，该路径已在绘制矩形的初始化代码期间创建

因此，其效果是，一旦鼠标位于任何图形上，循环的每个迭代中的条件都是真实的

通过在每次迭代中创建新路径来解决此问题：

for(var i=0;i<entities.length;i++){
    var entity=entities[i];
    ctx.beginPath(); // <----
    ctx.rect(entity.x, entity.y, width, height);
    // ...etc

for（var i=0；i的
isPointInPath
方法将检查给定的坐标是否在当前路径形成的任何形状中。每个
rect
都添加到相同的单一路径中，该路径已在绘制矩形的初始化代码期间创建

因此，其效果是，一旦鼠标位于任何图形上，循环的每个迭代中的条件都是真实的

通过在每次迭代中创建新路径来解决此问题：

for(var i=0;i<entities.length;i++){
    var entity=entities[i];
    ctx.beginPath(); // <----
    ctx.rect(entity.x, entity.y, width, height);
    // ...etc

（变量i=0；i）的