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 res

Solution 1:

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