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 works just fine, but you have a starting angle that ought to be zero to get what you expect. Here's working code:

http://jsfiddle.net/HETvZ/

I think your confusion is from what starting angle does. It does not mean that it starts at that point and then adds endAngle radians to it. It means that the angle starts at that point and ends at the endAngle radians point absolutely.

So if you startAngle was 1.0 and endAngle was 1.3, you'd only see an arc of 0.3 radians.

If you want it to work the way you're thinking, you're going to have add the startAngle to your endAngle:

context.arc(x, y, r, s, radians+s, false);

Like in this example: http://jsfiddle.net/HETvZ/5/