Question

I'm trying to create an Arc in canvas, and I want to use degrees, instead of radians. The problem is that it is not starting at 12 o'clock, but at 3 o'clock, just like the documentation has said, but how can I force it to 12?

JsFiddle: http://jsfiddle.net/C8CXz/

function degreesToRadians (degrees) {
   return degrees * (Math.PI/180);     
}

function radiansToDegrees (radians) {
   return radians * (180/Math.PI);
}

var canvas = document.getElementById('circle');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(80, 80, 50, degreesToRadians(0), degreesToRadians(180), false);
ctx.lineWidth = 10;
ctx.stroke();
Was it helpful?

Solution

Subtract half PI to both start and end point when drawing the arc, like this:

...
ctx.arc(80, 80, 50, degreesToRadians(0)-Math.PI/2, degreesToRadians(180)-Math.PI/2, false);
...

Here is the Fiddle.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top