HTML5 - best way to render an elliptic arc

Question

I'm using HTML 5 to render elliptic pie charts per section; using a path that starts from the centre, out to the edge, across it's arc and back to the centre which is then filled.

If they were perfectly circular I could use the arc or arcTo path functions, but because they're elliptical the outer curves will always have a variable radius.

It's these outer curves that I'm trying to figure out how to draw. I can't hack the maths enough to know if quadratic or bezier curves are the answer but they could be.

Anyway, the only way I've found to do it is to render lines for every 0.1 degrees around the edge, which does sine and cos calculations per point and is horribly inefficient. It looks like this (javascript):

while (arcAng <= curAng + dTheta) {
    this.parent2d.lineTo(this.left + (this.width / 2) + (this.width / 2) * Math.cos(arcAng * (Math.PI / 180)),
    this.top + (this.height / 2) + (this.height / 2) * Math.sin(arcAng * (Math.PI / 180)));
    arcAng += 0.1;
}

Can anyone tell me the most efficient way to do this?

Answer 1

Easiest way was to just apply a transform to the whole lot.

I used only the x position and width property to render the circle (as if it were within a perfect square), and applied the x,y scaling (1, height/width).