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.

Answer 2

A path starts with beginPath and ends with endPath. Every thing in between is the same path. You can even draw paths with holes in them by using winging rules. Draw something in one direction and something else the opposite direction but inside the first thing. Let's draw a rectangle with a hole in the middle using lines. beginPath(); moveTo (10,10); lineTo(100,10); lineTo((100,60); lineTo(10,60); lineTo(10,10); closePath(); moveTo(20,20); lineTo(20,50); lineTo(90,50); lineTo(90,20); lineTo(20,20); closePath(); endPath(); fill();

You could do this with any shape. Try an arc in one direction then another in the opposite direction using a smaller radius