Dibujo diferentes formas de colores en un camino (HTML5 Canvas/Javascript)

Question

que estoy tratando de dibujar múltiples arcos de círculos llenos de diferentes colores

 //-------------- draw 
     ctx.beginPath(); 
     ctx.fillStyle = "black"; 
     ctx.arc(30, 30, 20, 0, Math.PI*2, true); 
     ctx.fill(); 
     ctx.fillStyle = "red"; 
     ctx.arc(100, 100, 40, 0, Math.PI*2, true); 
     ctx.fill(); 
     ctx.closePath(); 

Esto produce dos arcos rellenados con rojo, y puedo decir que hay un contorno negro débil alrededor del más pequeño.

¿Alguien puede arrojar algo de luz sobre cómo puedo lograr esto? ¿Qué estoy haciendo mal?

Answer 1

Cierre la ruta y vuelva a abrirla.

ctx.closePath(); 
ctx.beginPath(); 

jsFiddle.

... entre el código de dibujo del arco.

Answer 2

Un camino comienza con beginPath y termina con endPath. Todo en el medio es el mismo camino. Incluso puedes dibujar caminos con agujeros utilizando reglas de vuelo. Dibuja algo en una dirección y algo más en la dirección opuesta pero dentro de la primera cosa. Dibujemos un rectángulo con un agujero en el medio utilizando líneas. beginPath(); moveTo (10,10); lineA (100,10); lineTo ((100,60); lineTo (10,60); lineTo (10,10); closePath(); moveTo (20,20); lineTo (20,50); lineTo (90 , 50); lineTo (90,20); lineTo (20,20); closePath(); endPath(); relleno();

Se puede hacer esto con cualquier forma Pruebe un arco. en una dirección y luego en la dirección opuesta usando un radio más pequeño