The code below renders a broken ring nicely in IE9 and FireFox, but fails part way round the circle in Chrome. Any ideas why, or what I can do to make it render in all browsers?
Cheers
(Chrome version 15.0.874.121)
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas1" width="201" height="201">No canvas in your browser...sorry...</canvas>
<script>
var canv = document.getElementById('canvas1');
var ctx = canv.getContext('2d');
var size = 201;
var centerX = size / 2;
var centerY = centerX;
var i;
var PI_180 = Math.PI / 180;
var fill = true;
size = size / 2;
ctx.translate(centerX, centerY);
// broken ring
for (i = 0; i < 360; i += 15) {
fill = !fill;
ctx.beginPath();
ctx.arc(0, 0, size * 0.86, i * PI_180, (i + 15) * PI_180, false);
ctx.arc(0, 0, size * 0.75, (i + 15) * PI_180, i * PI_180, true);
ctx.closePath();
if (fill) {
ctx.fill();
}
ctx.stroke();
}
ctx.translate(-centerX, -centerY);
</script>
</body>
</html>