Power By 专否社区

Google Chrome - context.canvas.width/context.canvas.width causes "Blue layer"

Go To StackoverFlow.com

5

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

I've noticed one of the web apps I am working on has a strange blue layer that appears on load and then vanishes when you start scrolling.

I've tracked this down to the following lines in my JS:

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

canWidth and canHeight are generated dynamically.

Commenting these lines out stops the blue layer from rendering, however this isn't a fix as I need to use the dynamically generated values to control the canvas width/height.

I also attempted hard coding the context.canvas.width and context.canvas.height to 600 and this also generated the blue layer issue.

This wasn't a problem on previous versions of Chrome, and I don't have any problems in FireFox.

Any suggestions on what the issue might be?

Edit:

Here is the block of code where the above resides (nodeLeft and nodeTop are generated else where):

                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();
2012-04-03 20:13
by ctdeveloper
Are you doing the added code once on load or mousemove/mouseup - Jim Schubert 2012-04-04 13:44
on load, and then on subsequent mouse movements when a node is dragged - ctdeveloper 2012-04-05 18:13
Resizing the canvas is a lot slower than writing to it. If you're doing that on mouse movements, that could be the problem. After setting the canvas size, you should only need to clear the rectangle of the canvas size - Jim Schubert 2012-04-05 19:29

0

EDIT:

Ok, I got it for me. It seems to be a problem with some AMD graphic cards. I could turn off the high performance mode for chrome in the catalyst control center. That fixed most of the annoying things for me...hope that it'll be fixed in the next versions.

For mor information see: http://code.google.com/p/chromium/issues/detail?id=121658

This is not a solution, but I'm facing the same problem and it's driving me nuts. I'm trying to nail it down. I've tested differnt browser on different machines:

Problems:

  • Blue layers (I only see them if Chrome is NOT maximized)
  • Misplaced y scrollbar (sometimes only shows up if I switch through the tabs)
  • Distorted shapes. The size of the canvas and the drawed images / shapes vary from chrome to other browser. Means, the canvas / shapes is smaller on Chrome, it mostly shrinks the width.

Conclusion 1: It seems that it does not happen on every machine with Chrome 18.x.x. Seems to be a hardware issue, but couldn't constrain it futher actually.

Conclusion 2: If i set the size of the canvas to 200 height/width, the problems don't appear. If I set it higher than 200, it will deform the canvas / rectangle and other problems appear.

Conclusion 3: The problems show only up if something is drawed to the canvas or something is set, i.e. fillStyle.

Here the test snippets I used:

<canvas id="canvas" width="300" height="300" style="background-color:orange"></canvas>
...
ctx.fillRect (10, 10, 55, 50);
2012-04-17 22:45
by Johnny Sterlak
Thanks for this update. Looks like a hardware issue as you have suggested - ctdeveloper 2012-04-30 14:22

1

Can you post more code than the two lines you've provided? I believe it's something more than where you've set the width/height.

I have a drawing application that I've been tinkering with on and off for a while in which I do very much the same thing. The only difference is that I call context.scale(0,0); before setting the width and height. I have no issues in any version of Google Chrome with a blue overlay. Are you possibly modifying the context's scale value before setting the width and height?

e.g. here's what I have, setting the canvas to document width/height for a full-document drawing area:

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

edit: my tinkering site mentioned is at http://drawcomix.com if you want to test the blue overlay to see if it's your browser or your code.

edit: based on your additional comment...

I've seen tutorials on the web that suggest the best way to clear the canvas is to set the height/width. That's not entirely true. On document load, it may be the quickest/easiest way to do so, but on mouse movements, you're probably better off doing something like this:

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

You may not need setTransform if you're not performing any transformations on the canvas.

I believe I found this solution in Pro HTML5 Programming (Apress), but I'm not sure.

2012-04-03 20:23
by Jim Schubert
No problem I'll add it in above - ctdeveloper 2012-04-04 12:11
Thanks for this, I'll give it a try - ctdeveloper 2012-04-11 20:21
Ads