キャンバス内の弧の異なるfillStyleの色

Question

これは非常に簡単な解決策であると思いますが、これが痛いほど分かりやすい場合は事前にお詫び申し上げますが、2つの異なる弧に対して2つの異なるfillStylesを設定する方法を考え出すことはできません。 ..私はちょうど異なる色のサークルを描くことができるようにしたい。以下では、キャンバス内の他のシェイプ/描画メソッドで通常どおりに行う方法を示していますが、何らかの理由でアークを使用すると、両方のアークを最後のfillStyleに設定します。

ctx.fillStyle = "#c82124"; //red 
ctx.arc(15,15,15,0,Math.PI*2,true); 
ctx.fill(); 

ctx.fillStyle = "#3370d4"; //blue 
ctx.arc(580,15,15,0,Math.PI*2,true); 
ctx.fill(); 

Answer 1

私はあなたが開始と終了のパスステートメントがないと思います。パスはジオメトリだけであることを

ctx.fillStyle = "#c82124"; //red 
ctx.beginPath(); 
ctx.arc(15,15,15,0,Math.PI*2,true); 
ctx.closePath(); 
ctx.fill(); 

ctx.fillStyle = "#3370d4"; //blue 
ctx.beginPath(); 
ctx.arc(580,15,15,0,Math.PI*2,true); 
ctx.closePath(); 
ctx.fill(); 

Answer 2

（それはjsfiddle、see hereに私のために動作します）以下の注意事項をお試しください。 .fillStyleはいつでもfill()まで設定できます。