パスにさまざまな色の形を描く（HTML5 Canvas / Javascript）

Question

異なる色で塗りつぶされた複数の円弧を描画しようとしています

        //-------------- draw
        ctx.beginPath();
        ctx.fillStyle = "black";
        ctx.arc(30, 30, 20, 0, Math.PI*2, true);
        ctx.fill();
        ctx.fillStyle = "red";
        ctx.arc(100, 100, 40, 0, Math.PI*2, true);
        ctx.fill();
        ctx.closePath();

これにより、両方の円弧が赤で塗りつぶされ、小さい方の円弧の周りにかすかな黒い輪郭があることがわかります。

誰かが私がこれを達成する方法にいくつかの光を当てることができますか？私が間違っていることは何ですか？

Answer 1

パスを閉じてから、再度開きます。

ctx.closePath();
ctx.beginPath();

jsFiddle 。

...円弧描画コード間。