разные цвета 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, см. Здесь )

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