Geek Answers Handbook

The circle made by the Arc canvas doesn’t work correctly in IE10 and works fine in Chrome - confirm?

[Edit: Sent an error message: received a response that closePath required an arc → pie drawings]

Thus, IE requires closePath for arcs that form circles, but Chrome / FF allows you to do without:

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

End editing

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

This code should just display the rows and columns of circles in the html canvas.

Can anyone else confirm that this is displayed in Chrome and displayed strange in IE?

If so, what ideas are why?

Im running IE version: 10.0.9200.16540.

Here is the code and script: 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>
+4
source share
1 answer

It’s important to note that Chrome is incorrect here. IE10 and Firefox are properly compliant.

This is more obvious in a simple example, for example:

 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 are as follows:

enter image description here

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

Chrome (half), assuming a kind of moveTo between arc calls, but only to fill.

In other words, there should be straight lines between multiple arc commands, as Chrome shows when stroke() is applied. Chrome does not comply with these lines to fill in and that error.

+2
source

More articles:


All Articles