Ad

Understand Math Done For Endpoint In Canvas Arc

- 1 answer

Given that i want to draw a circle in canvas that looks like below:

angled circle

Now i am using the circliful plugin ,

Now the math done behind the scenes is like so:

if (type == 'angle') {
              startAngle = 2.25 * Math.PI;
              endAngle = 2.4;
              circ = 1.53 + Math.PI;
              quart = 0.73 + Math.PI / 0.996;
}

The above math gets used like so:

 context.arc(x, y, radius, endAngle, startAngle, false);

Now i understand the math done for startAngle, but why endAngle = 2.4 ? where does the 2.4 come from ?

I know it works perfectly, Why 2.4 ? can anybody explain ?

The line of code can be seen HERE.

Ad

Answer

2.4 is approximately 76% of a half circle.

The context.arc function takes angles measured clockwise from positive x. With other words, the 2.4 indicates approximately going from the center to the bottom left at a 45 degree angle.

Similarly in the same code there's a snippet that says endAngle = 3.13, which is nearly PI or nearly 180 degrees (so pointing to the left), that's used for half a circle.

Ad
source: stackoverflow.com
Ad