different fillStyle colors for arc in canvas

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

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