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:
And if I simply replace draw(106.2367)
with draw(106.236)
, I get a completely different result:
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?