Connecting arcs on HTML5 Canvas

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 whit开发者_StackOverflow社区e circle over the pie chart to give the ring graph, but I want to know the answer to the question above.

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.

Why are you drawing arcs? Would'nt it be easier if you just draw the circle (or circles for the ring) and then draw radius?