この問題の解決方法は非常に簡単だと思います。明らかなことであればお詫びしますが、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();
ベストアンサー1
パスの開始と終了のステートメントが抜けていると思います。以下を試してください（私の場合はjsfiddleで動作します）。こちらをご覧ください）
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();