CODEWITHSUNDEEP
htmlcanvas
Abhijit
Abhijit

Reputation: 1173

How to dividing a semicircular region into colored segments using HTML Canvas

trying to divide a semicircular region into colored segments in HTML Canvas. Here's 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

Alternate way, might be to use concentric arc() segments. I'm trying that now. But any one who can throw some light would be a great help.

Upvotes: 3

Views: 385

Answers (1)

Abhijit
Abhijit

Reputation: 1173

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

Upvotes: 1

Related Questions