Drawing different colored shapes in a path (HTML5 Canvas / Javascript)
24,814
Close the path and then reopen it.
ctx.closePath();
ctx.beginPath();
...between the arc drawing code.
Author by
jondavidjohn
Loving my wife, my sons, and my work. Building CodeShip by day and packtracker by night, otherwise you can probably find me outside 🧗🏻♂️🏕 http://jondavidjohn.com
Updated on July 27, 2022Comments
-
jondavidjohn almost 2 years
I'm trying to draw multiple circle arcs filled with different colors
//-------------- 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();
This produces both arcs filled in with red, and I can tell that there is a faint black outline around the smaller one.
Can anyone shed some light on how I can accomplish this? what I'm doing wrong?