diversi colori fillStyle per arco su tela

Question

Immagino che la soluzione sia molto semplice e si scusa in anticipo se ciò è dolorosamente ovvio, ma non riesco a capire come impostare due diversi fillStyle per due archi diversi. .. Voglio solo essere in grado di disegnare cerchi di colore diverso. Di seguito ho come vorrei farlo normalmente con altre forme/metodi di disegno su tela, ma per qualche motivo con archi imposta entrambi gli archi all'ultimo 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

Penso che manchino le istruzioni del percorso di inizio e fine. Provare quanto segue (per me funziona 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(); 

Answer 2

Nota che il percorso è solo la geometria. È possibile impostare .fillStyle in qualsiasi momento fino a fill().