CODEWITHSUNDEEP
javascripthtmlcanvasbezierellipse
Trevor Burnham
Trevor Burnham

Reputation: 77436

Bezier curves draw stretched ellipses in HTML5 canvas

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?

Upvotes: 2

Views: 2441

Answers (1)

Trevor Burnham
Trevor Burnham

Reputation: 77436

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

Upvotes: 4

Related Questions