CODEWITHSUNDEEP
javascriptcanvasgeometry
Samy Sammour
Samy Sammour

Reputation: 2465

drawing the percentage of a value in canvas. Math-Javascript

I have a math-programming problem. I am trying to calculate the percentage of the availability and draw a complete a circle that represents the value.

So I have all customer-service members "allMemebrs" and I have the available as "availableMemebrs" I calculated it like this:

var percentage = (100 * availableMemebrs) / allMemebrs;

and now I want to draw a circle in canvas javascript: 

ctx.arc(50, 50, 20, 1.5 * Math.PI, percentage * 2 * Math.PI);

If I start the circle from 0 that means:

ctx.arc(50, 50, 20, 0, percentage * 2 * Math.PI);

it will draw it correctly, but the problem is that I want to draw it from 1.5 * PI and that is the problem.

I am a bit lost. Anybody can help?

Upvotes: 0

Views: 288

Answers (2)

Tomasz Bubała
Tomasz Bubała

Reputation: 2153

According to mdn, the syntax for drawing an arc is follwing:

ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);

Your endAngle is fine only if your startAngle would be 0, as Faly suggested in his answer.

Edit after comment:

You can set your default offset from starting point.

var offset = 1.5 * Math.PI;
ctx.arc(50, 50, 20, offset, (percentage * 2 * Math.PI) + offset);

Upvotes: 1

Faly
Faly

Reputation: 13346

Your percentage calculation is wrong:

var percentage = availableMemebrs / allMemebrs ;
ctx.arc(50, 50, 20, 0, percentage * 2 * Math.PI);

Upvotes: 0

Related Questions