Skip to content Skip to sidebar Skip to footer

Circle Made By Canvas Arc Is Misbehaving In Ie10 And Fine In Chrome--confirm?

[Edit: Sent bug report: received reply that closePath is required an arc-->circle drawings] So IE requires closePath on arcs that form circles but Chrome/FF let you go without:

Solution 1:

It's important to note that Chrome is the incorrect one here. IE10 and Firefox are following the specification properly.

It's more apparent in a simple example such as this:

ctx.fillStyle = 'rgba(255,0,0,.4)';

ctx.beginPath();
ctx.arc(50,50,20,Math.PI*2, 0);
ctx.arc(50,150,20,Math.PI*2, 0);
ctx.arc(150,100,20,Math.PI*2, 0);

ctx.stroke();
ctx.fill();

http://jsfiddle.net/ZMKEG/

The results of such:

enter image description here

According to the specification, the arc command adds two points to a subpath and the arc between them. It does not close a subpath, and it only adds an implicit moveTo if it is at the start of the current path. IE and Firefox are doing the right thing here.

Chrome is (half-)assuming a kind of moveTo between the arc calls, but only for filling.

In other words, between several arc commands there should be straight lines, as Chrome correctly shows when stroke() is applied. Chrome is not respecting these lines for filling, and that's a bug.

Post a Comment for "Circle Made By Canvas Arc Is Misbehaving In Ie10 And Fine In Chrome--confirm?"