1

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?

Dan Is Fiddling By Firelight
  • 5,981
  • 17
  • 77
  • 128
Toby Wilson
  • 1,467
  • 5
  • 19
  • 42
  • possible duplicate of [How to draw an oval in html5 canvas?](http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas) – sje397 Sep 21 '10 at 14:23
  • Essentially the same yeah, but with just an arc section of an ellipse between two points. – Toby Wilson Sep 21 '10 at 14:35
  • An elliptic curve is something completely different, with applications in public key cryptography. – starblue Sep 21 '10 at 19:39

1 Answers1

0

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).

Toby Wilson
  • 1,467
  • 5
  • 19
  • 42