different fillStyle colors for arc in canvas

Question

I imagine the solution to this is very simple, and apologize in advance if this is painfully obvious, but I can't seem to figure out how to set two different fillStyles for two different arcs ...I just wanna be able to draw different color circles. Below I have how I would normally do it with other shapes/drawing methods in canvas, but for some reason with arcs it sets both arcs to the last 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();

Intemerate

Answer 1

I think you're missing the begin and end path statements. Try the following (it works for me in jsfiddle, see here)

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

Sigmund

Ah, of course!!! I figured it be something as obvious as that. For some reason I thought you only needed begin/closePath when you are drawing lines or curves, but I guess it's always necessary :) thnx so much! – Intemerate

ctx.closePath() is useless here. What it does is to enclose the current subpath, i.e it draws a line from the current path position to the last opened point. fill() already does that. Only beginPath() is needed. – Micro

Answer 2

Note that the path is just the geometry. You can set .fillStyle anytime up until the fill( ).

Milker

Answer 3

I tried it with the beginPath() function and it worked. I hope these works for you to:-

ctx.fillStyle = "#c82124"; //red
ctx.beginPath();
ctx.arc(15,15,15,0,Math.PI*2,true);
ctx.fill();
ctx.fillStyle = "#3370d4"; //blue
ctx.beginPath();
ctx.arc(580,15,15,0,Math.PI*2,true);
ctx.fill();

Oxfordshire