разные цвета fillStyle для дуги в холсте

Question

Я предполагаю, что решение этого очень просто и извиниться заранее, если это болезненно очевидно, но я не могу понять, как установить два разных fillStyles для двух разных дуг. .. Я просто хочу рисовать разные цветные круги. Ниже у меня есть то, как я обычно делаю это с другими формами/методами рисования в холсте, но по какой-то причине с дугами он устанавливает обе дуги в последний 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

Я думаю, что вам не хватает инструкций начала и конца пути. Попробуйте следующее (это работает для меня в 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

Обратите внимание, что путь только геометрия. Вы можете установить .fillStyle в любое время до fill().