2

This method for drawing ellipses appears to be clean and elegant: http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/

However, in testing it, I found that the resulting ellipses were stretched. Setting width and height equal, I got ellipses that were about 20% taller than wide. Here's the result with width = height = 50:

Tall canvas ellipse (should be circle)

To make sure that the problem was with the method itself, I tried changing the algorithm so that all the points used for the Bezier curves were rotated 90 degrees. The result:

Wide canvas ellipse(should be circle

Again, in both cases, I was expecting a 50x50 circle. Using the arc method described at How to draw an oval in html5 canvas? works fine, generating perfect 50x50 circles (which can then be stretched into ellipses using scale).

What's going on?

Community
  • 1
  • 1
Trevor Burnham
  • 76,828
  • 33
  • 160
  • 196

1 Answers1

4

In writing my question, I realized that I misunderstood the way Bézier curve control points work. Looking more closely at the resource I was using, the ellipse's arcs never touch the x - width / 2 and x + width / 2 boundaries in the figure. So it's not really "width" at all.

In the future, I'll stick with arc instead of bezierCurveTo.

(It's possible to adjust for this using a "kappa"; see this answer. That approach is preferable to arc if you're using a stroke, not just a fill, since scale will cause uneven line thickness.)

Community
  • 1
  • 1
Trevor Burnham
  • 76,828
  • 33
  • 160
  • 196
  • Not to mention that an arc takes a fraction of the CPU time building a Bezier curve does. – Blindy Apr 17 '11 at 16:58
  • 1
    That makes intuitive sense, but could you cite a source? – Trevor Burnham Apr 17 '11 at 17:03
  • I do not advice to use **arc** function if you will do transformations to the ellipse. You need to stick with 4 or 8 cubic curve....as they will be able to handle the transformation properly – Alex Apr 04 '12 at 10:34