HTML5: Fill circle/arc by percentage

Question

Here is my pseudo code:

var percentage = 0.781743; // no specific length
var degrees = percentage * 360.0;
var radians = degrees * Math.PI / 180.0;

var x = 50;
         


        

Answer 1

Your code is just fine. you need to have: s=0 i.e. starting point must be zero. and if you want circle to start drawing at top you can use: context.rotate(-90 * Math.PI / 180); but after rotating you will have to check arc()'s x,y arguments. i used it like:

context.rotate(-90 * Math.PI / 180);
context.arc(-200, 200, 150, startPoint, radian, false); 
context.lineWidth = 20;
context.strokeStyle = '#b3e5fc';
context.stroke();
context.closePath();

after this i needed to display percentage in text form so i did:

context.rotate(90 * Math.PI / 180);
context.fillStyle = '#1aa8ff';
context.textAlign = 'center';
context.font = "bold 76px Verdana";;
context.textBaseline = "middle";
context.fillText("50%", 200, 200);