relleno diferente Colores de estilo para arco en lienzo

Question

Imagino que la solución es muy simple, y me disculpo por adelantado si esto es dolorosamente obvio, pero parece que no puedo encontrar la manera de configurar dos estilos de relleno diferentes para dos arcos diferentes. Solo quiero dibujar círculos de colores diferentes. Debajo tengo cómo normalmente lo haría con otras formas/métodos de dibujo en lienzo, pero por alguna razón con arcos establece ambos arcos en el último 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(); 

Answer 1

creo que se está perdiendo las declaraciones de comienzo y final de ruta. Intente lo siguiente (que funciona para mí en 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(); 

Answer 2

Recuerde que la ruta es sólo la geometría. Puede establecer .fillStyle en cualquier momento hasta el fill().