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

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

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