title: How can I clean up horizontal scaling of an ellipse in a canvas?
body: <p>I have a page where I'm trying to render a circle on an HTML canvas that's got a scale factor applied along the X-axis.  So, I'm rendering an ellipse, with the width divided by the applied scaling factor.  The problem is that the resulting ellipse is pretty ugly (on the left is what I want, items on the right are what I get depending on how heavily scaled the axis is):</p>
  <p><a href="https://i.stack.imgur.com/cnj2E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cnj2E.png" alt="On the left, a nice clean circle; two increasingly distorted circles on the right" /></a></p>
  <p>I can imagine this is due to some combination of floating-point math, aliasing, etc.  But: how do I fix/work around this?</p>
  <p>(If you're wondering, my use case is adding a fixed-pixel-size marker over smaller items on the canvas to increase their visibility; the scale factor applied here is due to user zooming.)</p>
  <p>Example canvas code:</p>
  <pre><code>const ellipseSize = 8;
  context.strokeStyle = &quot;rgba(0, 0, 255, 1)&quot;;
  context.strokeWidth = 2;
  context.beginPath();
  context.ellipse(15, 15, ellipseSize, ellipseSize, 0, 0, 2 * Math.PI);
  context.stroke();
  
  let scale = 4.687;
  context.scale(scale, 1);
  context.lineWidth = 2 / scale;
  context.beginPath();
  context.ellipse(25, 15, ellipseSize / scale, ellipseSize, 0, 0, 2 * Math.PI);
  context.stroke();
  context.setTransform(1, 0, 0, 1, 0, 0);
  
  scale = 8.262;
  context.scale(scale, 1);
  context.lineWidth = 2 / scale;
  context.beginPath();
  context.ellipse(25, 15, ellipseSize / scale, ellipseSize, 0, 0, 2 * Math.PI);
  context.stroke();
  </code></pre>
  <p>StackBlitz link: <a href="https://stackblitz.com/edit/js-nycwje" rel="nofollow noreferrer">https://stackblitz.com/edit/js-nycwje</a></p>