Google Chrome - context.canvas.width/context.canvas.width produce "Capa azul"

Question

Actualicé desde Chrome versión 17 a Chrome: 18.0.1025.142 hoy.

He notado que una de las aplicaciones web en las que estoy trabajando tiene una extraña capa azul que aparece al cargarse y luego desaparece cuando comienza a desplazarse.

He rastreado esto a las siguientes líneas en mis JS:

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

canWidth y canHeight se generan de forma dinámica.

Comentando estas líneas se detiene la capa azul del procesamiento, sin embargo, esto no es una solución ya que necesito usar los valores generados dinámicamente para controlar el ancho/alto del lienzo.

También intenté codificar el context.canvas.width y context.canvas.height a 600 y esto también generó el problema de la capa azul.

Esto no fue un problema en las versiones anteriores de Chrome, y no tengo ningún problema en FireFox.

¿Alguna sugerencia sobre el problema?

Editar:

Aquí es el bloque de código en la que se generan (nodeLeft y nodeTop otro lugar) reside anteriores:

   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

EDIT:

Ok, lo tengo para mí. Parece ser un problema con algunas tarjetas gráficas de AMD. Podría desactivar el modo de alto rendimiento para Chrome en el centro de control del catalizador. Eso solucionó la mayoría de las cosas molestas para mí ... espero que se solucione en las próximas versiones.

Para obtener información mor ver: http://code.google.com/p/chromium/issues/detail?id=121658

---

Esto no es una solución, pero que se me presentan el mismo problema y me está volviendo loco. Estoy tratando de clavarlo. He probado el navegador differnt en máquinas diferentes:

Problemas:

• capas azules (que sólo ven si Chrome no está maximizada)
• fuera de lugar y la barra de desplazamiento (a veces sólo aparece si cambiar entre las pestañas)
• Formas distorsionadas. El tamaño del lienzo y las imágenes/formas dibujadas varían de Chrome a otro navegador. Significa que el lienzo/las formas es más pequeño en Chrome, en su mayoría reduce el ancho.

Conclusión 1: Parece que esto no sucede en todos los equipos con Chrome 18.x.x. Parece ser un problema de hardware, pero no podría limitarlo en realidad.

Conclusión 2: si fijo el tamaño del lienzo a 200 altura/anchura, no aparecen los problemas. Si lo configuro más alto que 200, deformará el lienzo/rectángulo y aparecerán otros problemas.

Conclusión 3: Los problemas mostrar sólo si algo está dibujada a la lona o si se establece algo, es decir, fillStyle.

Aquí los fragmentos de prueba que utilizan:

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

Answer 2

Se puede publicar más código que las dos líneas que nos has proporcionado ? Creo que es algo más que donde has establecido el ancho/alto.

Tengo una aplicación de dibujo con la que he estado trabajando durante un tiempo en la que hago más o menos lo mismo. La única diferencia es que llamo al context.scale(0,0); antes de configurar el ancho y alto. No tengo problemas en ninguna versión de Google Chrome con una superposición azul. ¿Es posible que modifique el valor de la escala del contexto antes de establecer el ancho y el alto?

p. Ej. aquí es lo que tengo, el establecimiento de la lona para documentar anchura/altura de un área de dibujo-documento completo:

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

edición: mi sitio retoques mencionado está en http://drawcomix.com si quieres probar la superposición azul para ver si es su navegador o tu código

edición: basado en su comentario adicional ...

que he visto tutoriales en la web que sugieren que la mejor manera de limpiar el lienzo es fijar la altura/anchura. Eso no es del todo cierto. En la carga de documentos, puede ser la forma más rápida/más fácil de hacerlo, sino en los movimientos del ratón, usted es probablemente mejor de hacer algo como esto:

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

Es posible que no necesite setTransform si no está realizando cualquier transformación en el lienzo.

Creo que encontré esta solución en la Programación Pro HTML5 (Apress), pero no estoy seguro.