javascript - rectangulo - diferentes colores FillStyle para arco en lienzo

dibujar un triangulo en javascript

Question

Me imagino que la solución a esto 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 diferentes círculos de color 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 te faltan las declaraciones de ruta de inicio y fin. Prueba lo siguiente (me funciona en jsfiddle, mira aquí )

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

Tenga en cuenta que la ruta es solo la geometría. Puede establecer .fillStyle cualquier momento hasta el fill( ) .