CODEWITHSUNDEEP
canvashtml5-canvas
markE
markE

Reputation: 105035

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:

context.beginPath();
context.arc(100,100,3,0,Math.PI*2,false);
context.closePath();

End edit

///////////////////////////////////////////////////////

This code is supposed to simply display rows and columns of circles in html canvas.

Can anyone else confirm that this displays fine in Chrome and displays weird in IE?

If so, any ideas why?

I’m running IE version: 10.0.9200.16540.

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/P72NM/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

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

    var spacing=15;
    var linespacing=8;
    var radius=3;

    ctx.lineWidth=linespacing;
    ctx.fillStyle="maroon";

    ctx.strokeStyle="red";
    ctx.beginPath();
    for(var row=5;row<canvas.height;row+=spacing*3){
        for(var col=5;col<canvas.width;col+=spacing*3){
            ctx.arc(col,row, 4, 0, 2 * Math.PI, false);
        }
    }    
    ctx.fill();


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Upvotes: 4

Views: 416

Answers (1)

Simon Sarris
Simon Sarris

Reputation: 63830

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.

Upvotes: 2

Related Questions