Question

It looks like someone did mention this bug to the Chromium forums but there was no resolution so I'm wondering if anyone simply knows a workaround.

The issue is trying to render a half circle counter-clockwise in Chrome, using the canvas element. Instead this renders a full circle:

var ctx = document.getElementById('can').getContext('2d');
ctx.beginPath();
ctx.arc(50,50,50,0,Math.PI*3,true);
ctx.fill();
ctx.closePath();

Here is a fiddle, view in non-chrome, then in chrome: fiddle

Was it helpful?

Solution

The bug probably stems from this part of the spec:

If the anticlockwise argument is omitted or false and endAngle-startAngle is equal to or greater than 2π, or, if the anticlockwise argument is true and startAngle-endAngle is equal to or greater than 2π, then the arc is the whole circumference of this circle.

Chrome does not appear to respect the second part of that statement (i.e. when anticlockwise is true).

Why not normalize your end-point?

var end = 3 * Math.PI;
while (end > 2 * Math.PI) {
    end -= 2 * Math.PI;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top