キャンバスの要素は色を変えないと思われますか？

Question

私はHTML5キャンバスチェッカーゲームを作ろうとしています。

私は私のプロジェクトのJSFiddleを作った：チェッカーを選択する際に、（ライン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(); 
    } 
} 

、：ここでhttps://jsfiddle.net/0q6thfq8/

は、私が問題の原因かもしれないと思う機能です最後の黒いチェッカーは緑色の輪郭を取得します。私が午前問題のユニークさに、私はこの問題について話を他のフォーラムへの投稿やウェブサイトを見つけるのに苦労しています原因

。

誰かがこの問題にいくつかの光を当てますか？ありがとう。

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を必要としていることを覚えておいてください。