Question

I am trying to make a donut chart using the arc function in the HTML5 canvas. I am wanting to know how to use the lineTo function to connect two arcs together.

At the moment I have a pie chart which has fixed central x/y coords, so making the slices is easy as once the arc of each slice is done, the lineTo method simply uses the the fixed coords.

However with a ring/donut chart, I have two arcs, one with a smaller radius, but no idea how to connect the ends together without horrifically complicated trigonometry. Is there any way to get the ‘start’ and ‘end’ x/y coords of the arc?

I have a current hackyish ‘solution’ of simply drawing a smaller white circle over the pie chart to give the ring graph, but I want to know the answer to the question above.

Answer 1

You just have to remember a little trigonometry. If your center point is x, y and radius is r; then the coordinates on the circle at an angle alpha are:

pointX = x + Math.cos(alpha) * r;
pointY = y + Math.sin(alpha) * r;

And you have two of those angles, corresponding to the starting and the ending point.