Geek Answers Handbook

Google Chrome - context.canvas.width / context.canvas.width calls the Blue Layer,

I upgraded from Chrome version 17 to Chrome: 18.0.1025.142 today.

I noticed that one of the web applications I'm working on has a weird blue layer that appears when it loads, and then disappears when you start scrolling.

I traced this to the following lines in my JS:

                context.canvas.width = canWidth;
                context.canvas.height = canHeight;

canWidth and canHeight are dynamically generated.

Commenting out these lines stops the blue rendering, however this is not a fix, since I need to use dynamically generated values ​​to control the width and height of the canvas.

I also tried hard-coding context.canvas.width and context.canvas.height to 600, and this also caused a blue layer problem.

This is not a problem in previous versions of Chrome, and I have no problem with FireFox.

, ?

Edit:

, (nodeLeft nodeTop else ):

                context.clearRect ( 0 , 0 ,canWidth, canHeight );
                context.canvas.width = canWidth;
                context.canvas.height = canHeight;                                 
                context.beginPath();
                context.moveTo(x, y);
                context.lineTo(nodeLeft, nodeTop);
                context.strokeStyle = "#000000";
                context.lineCap = "round";
                context.stroke();
+5
2

EDIT:

, . , AMD. . ... , .

. http://code.google.com/p/chromium/issues/detail?id=121658

, , . . :

:

  • ( , Chrome )
  • ( , )
  • . / . , / Chrome, .

1: , Chrome 18.x.x. , , .

2: 200 height/width, . 200, / .

3: , - - , .. FillStyle.

:

<canvas id="canvas" width="300" height="300" style="background-color:orange"></canvas>
...
ctx.fillRect (10, 10, 55, 50);
0

, , ? , , /.

, , . , context.scale(0,0); . Google Chrome . ?

. , / :

context.scale(0,0);
context.canvas.width = $(document).width();
context.canvas.height = $(document).height();

edit: http://drawcomix.com, , , .

: ...

, , /. . / , , , - :

context.save();
context.setTransform(1,0,0,1,0,0);
context.clearRect(0,0,width,height); // width/height of canvas
context.restore();

setTransform, .

, Pro HTML5 Programming (Apress), .

+1

More articles:


All Articles