0

HTML5 Canvas seems to have an error when drawing an ellipse. Consider this simple example:

For me this occurs in Chrome and Opera, but not Firefox or Safari.

var ctx = document.getElementById("canvas").getContext("2d");

function draw(val) {
  ctx.moveTo(160, 110);
  ctx.lineTo(val, 60.1418);
  ctx.closePath();
  ctx.ellipse(110, 110, 50, 50, 0, 4.63705, 0, true);
  ctx.stroke();
}
draw(106.2367);
//draw(106.236);
<canvas id="canvas" width="200" height="200" />

I get the following image as a result:

ellipse 1

And if I simply replace draw(106.2367) with draw(106.236), I get a completely different result:

ellipse 2

I know this issue can be fixed by removing ctx.closePath(), but I want to know why this happened in the first place. Is this a bug?

5
  • Open an issue at bugs.chromium.org
    – Kaiido
    Commented Dec 2 at 2:16
  • 1
    Please d'on't use transparency in your picture. I use SO with Dark-mode preference for display (as many) and the background is black. Commented Dec 2 at 2:17
  • That would be a non-regression, going back as far as M93 it still reproduced. If you absolutely need it to work, my path2D-inspection manages to avoid the bug (by drawing 2 curves for the ellipse), but it's gonna make everything slower: jsfiddle.net/h4g26j3f
    – Kaiido
    Commented Dec 2 at 2:24
  • @Kaiido Interesting. What do you mean by "non-regression" and M93?
    – KobeSystem
    Commented Dec 3 at 14:45
  • I mean the bug has always been there, it's not like a recent change introduced it. M93 is what corresponds to Chrome 93, i.e. a quite old version.
    – Kaiido
    Commented Dec 3 at 21:31

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.