title: Bezier curves draw stretched ellipses in HTML5 canvas
body: <p>This method for drawing ellipses appears to be clean and elegant: <a href="http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/" rel="nofollow noreferrer">http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/</a></p>
  
  <p>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 <code>width = height = 50</code>:</p>
  
  <p><img src="https://i.stack.imgur.com/W5SjI.png" alt="Tall canvas ellipse (should be circle)"></p>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/I8wfv.png" alt="Wide canvas ellipse(should be circle"></p>
  
  <p>Again, in both cases, I was expecting a 50x50 circle. Using the <code>arc</code> method described at <a href="https://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas">How to draw an oval in html5 canvas?</a> works fine, generating perfect 50x50 circles (which can then be stretched into ellipses using <code>scale</code>).</p>
  
  <p>What's going on?</p>