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

Question

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();

Answer 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.