画布元素改变颜色时不应该？

Question

我想制作一个HTML5画布跳棋游戏。

我做我的项目的的jsfiddle：https://jsfiddle.net/0q6thfq8/

这里是我认为可能会导致此问题的功能：（线77）

this.drawCheckers = function() { 
    this.drawSquares(); 
    for(var checker of this.checkers) { 
     checker.draw();   
    } 
    if(this.selection != null) { 
     ctx.strokeStyle = "green"; 
     ctx.lineWidth = "5"; 
     ctx.rect(this.selection.x,this.selection.y,64,64); 
     ctx.stroke(); 
    } 
} 

出于某种原因，在选择检查时，最后一个黑色检查员得到一个绿色轮廓。

由于我遇到的问题的独特性，我很难找到讨论此问题的其他论坛帖子和网站。

有人可以解释一下这个问题吗？谢谢。

Answer 1

添加在beginPath()：

if(this.selection != null) { 
    ctx.beginPath(); 
    ctx.strokeStyle = "green"; 
    ctx.lineWidth = "5"; 
    ctx.rect(this.selection.x,this.selection.y,64,64); 
    ctx.stroke(); 
} 

Fiddle

这将绘制新的选择之前扫清道路。否则，将包括旧的路径内容。

还记得在某些浏览器中，ellipse()需要polyfill。