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

Я предполагаю, что решение этого очень просто и извиниться заранее, если это болезненно очевидно, но я не могу понять, как установить два разных 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();

Ответ 1

Я думаю, что вам не хватает инструкций начала и конца пути. Попробуйте следующее (это работает для меня в jsfiddle, см. Здесь)

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

Ответ 2

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