How to split a semicircular area into color segments using HTML Canvas

Question

tries to split a semicircular area into color segments in HTML canvas. Here is what I tried

            ctx.save();
            ctx.translate(c.width / 2, (c.height / 2)-1);
            ctx.strokeStyle = "red"
            ctx.lineWidth = 3;
            ctx.lineCap = "round";
            var x=400; // number of times lineTo strokes. Greater the value the better is the smoothness
            var factor=1;   //with =1, the entire semicirular region is filled.
            for (var i = 0; i < x; i++) { 
                 //ctx.rotate(Math.PI);
                ctx.beginPath();

                ctx.strokeStyle = "rgba(255,0,0,1)";
                //ctx.rotate(-Math.PI/2);

                ctx.rotate((-Math.PI * factor) / x); 
                //1st color segment, factor=1 helps to paint 100% of semicircular region

                ctx.moveTo(122, 0);
                ctx.lineTo(70, 0);
                ctx.stroke();
                //ctx.rotate(Math.PI); //2nd color segment

An alternative way would be to use concentric arc () segments. I'm trying to do it now. But anyone who can cast some light will be of great help.

Answer 1

The sample at http://www.phpied.com/wp-content/uploads/2008/02/canvas-pie.html was the one I was looking for. Uses a concentric arc () as I expected.