Drawing different colored shapes in a path (HTML5 Canvas / Javascript)

Question

I\'m trying to draw multiple circle arcs filled with different colors

        //-------------- draw
        ctx.beginPath();
        ctx.fillStyle = \"black\";
          


        

Answer 1

A path starts with beginPath and ends with endPath. Every thing in between is the same path. You can even draw paths with holes in them by using winging rules. Draw something in one direction and something else the opposite direction but inside the first thing. Let's draw a rectangle with a hole in the middle using lines. beginPath(); moveTo (10,10); lineTo(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(); fill();

You could do this with any shape. Try an arc in one direction then another in the opposite direction using a smaller radius