用不正确的属性绘制的画布元素

Question

当unit.length到达最后一个时，在角色上方绘制的最后一个chatbubble采用highlightSelectedCharacter的属性！

简单地说，chatbubble会忽略其所有样式，并将highlightSelectedCharacter内的所有内容都包含在内。如果我更改了highlightSelectedCharacter内的lineWidth或颜色，那么chatbubble的最后一次运行也会如此。

当我完全取消chatbubble时，其他一些功能会以同样的方式受到影响。

只有在highlightSelectedCharacter开启时（characterSelect != -1返回true时）才会发生这种情况。

另请注意highlightSelectedCharacter();在循环之外，因此没有理由相互影响。

如果我发表评论drawChatBubble，drawShadow现在就会受到影响。

for (var i = 0; i < unit.length; i++) {
    moveCharacter(i);
    drawShadow(unit[i].position.x, unit[i].position.y);
    drawChatBubble(unit[i].position.x, unit[i].position.y);

    drawCharacter(unit[i]);
}

//Highlight Selected Character
if (characterSelect != -1) {
    highlightSelectedCharacter();
}

function drawChatBubble(positionA, positionB) {
    var centerX = positionA + 45;
    var centerY = positionB;
    var boxSize = 10;

    ctx["canvas"].save();

    ctx["canvas"].fillStyle = 'rgba(255,255,255,0.2)';
    ctx["canvas"].strokeStyle = 'rgba(0,0,0,0.8)';
    ctx["canvas"].lineWidth = 3;

    ctx["canvas"].beginPath();
    ctx["canvas"].moveTo(centerX, centerY);
    ctx["canvas"].lineTo(centerX + boxSize, centerY - boxSize * 2);
    ctx["canvas"].lineTo(centerX + boxSize, centerY - boxSize * 4);
    ctx["canvas"].lineTo(centerX + boxSize * 4, centerY - boxSize * 4);
    ctx["canvas"].lineTo(centerX + boxSize * 4, centerY - boxSize);
    ctx["canvas"].lineTo(centerX + boxSize * 2, centerY - boxSize);
    ctx["canvas"].lineTo(centerX + 0, centerY + 0);
    ctx["canvas"].closePath();
    ctx["canvas"].stroke();
    ctx["canvas"].fill();

    ctx["canvas"].restore();

    ctx["canvas"].drawImage(iconSet, 32 * 7, 32 * 0, 32, 32, centerX + boxSize + 2, centerY - boxSize * 4 + 2, boxSize * 3 - 4, boxSize * 3 - 4);
}

function highlightSelectedCharacter() {
    ctx["canvas"].save();
    ctx["canvas"].strokeStyle = "#00FFFF";
    ctx["canvas"].lineWidth = 2;
    ctx["canvas"].rect(unit[characterSelect].position.x, unit[characterSelect].position.y, 51, 51);
    ctx["canvas"].stroke();
    ctx["canvas"].restore();
}