Drawing different colored shapes in a path (HTML5 Canvas / Javascript)

Question

I'm trying to draw multiple circle arcs filled with different colors

        //-------------- 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();

This produces both arcs filled in with red, and I can tell that there is a faint black outline around the smaller one.

Can anyone shed some light on how I can accomplish this? what I'm doing wrong?

Answer 1

Close the path and then reopen it.

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

jsFiddle.

...between the arc drawing code.