jondavidjohn jondavidjohn - 2 months ago 8
Javascript Question

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

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.

enter image description here

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

Answer

Close the path and then reopen it.

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

jsFiddle.

...between the arc drawing code.

Circles