Google Chrome - context.canvas.width/context.canvas.width verursacht "Blaue Ebene"

Question

Ich habe heute von Chrome Version 17 auf Chrome aktualisiert: 18.0.1025.142.

Ich habe bemerkt, dass eine der Web-Apps, an denen ich gerade arbeite, eine seltsame blaue Ebene hat, die beim Laden erscheint und dann beim Scrollen verschwindet.

Ich habe dies aufgespürt zu den folgenden Zeilen in meinem JS:

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

canWidth und canHeight werden dynamisch generiert.

Durch das Kommentieren dieser Zeilen wird die Wiedergabe der blauen Ebene gestoppt, dies ist jedoch kein Fix, da ich die dynamisch generierten Werte zur Steuerung der Breite/Höhe der Zeichenfläche verwenden muss.

Ich habe auch versucht, die context.canvas.width und context.canvas.height hart auf 600 zu codieren, und dies erzeugte auch die blaue Schicht Problem.

Das war kein Problem in früheren Versionen von Chrome, und ich habe keine Probleme in FireFox.

Irgendwelche Vorschläge, was das Problem sein könnte?

Edit:

Hier ist der Code-Block, wo die oben befindet (nodeLeft und nodeTop erzeugt werden, sonst wo):

   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, ich habe es für mich. Es scheint ein Problem mit einigen AMD Grafikkarten zu sein. Ich könnte den Hochleistungsmode für Chrom in der Katalysatorzentrale ausschalten. Das hat die meisten der nervigen Dinge für mich behoben ... hoffe, dass es in den nächsten Versionen behoben wird.

Für mor Informationen siehe: http://code.google.com/p/chromium/issues/detail?id=121658

---

Dies ist keine Lösung, aber ich bin vor dem gleichen Problem, und es mich verrückt fährt. Ich versuche es festzunageln. Ich Differnt Browser auf verschiedenen Maschinen getestet haben:

Probleme:

• Blaue Schichten (ich sehe sie nur, wenn Chrome nicht maximiert ist)
• Misplaced y Scrollbar (manchmal zeigt nur, wenn ich Wechseln Sie durch die Registerkarten)
• Verzerrte Formen. Die Größe der Leinwand und die gezeichneten Bilder/Formen variieren von Chrom zu anderen Browsern. Bedeutet, die Leinwand/Formen sind bei Chrome kleiner, es schrumpft meist die Breite.

Fazit 1: Es scheint, dass es nicht mit Chrome 18.x.x. auf jeder Maschine geschieht Scheint ein Hardware-Problem zu sein, konnte es aber tatsächlich nicht weiter einschränken.

Schlussfolgerung 2: Wenn ich die Größe der Leinwand zu 200 Höhe/Breite eingestellt, die Probleme nicht auftreten. Wenn ich es höher als 200 setze, verformt es die Leinwand/das Rechteck und andere Probleme erscheinen.

Fazit 3: Die Probleme zeigen nur, wenn etwas auf die Leinwand gezeichnet oder etwas gesetzt ist, also fillStyle.

Hier werden die Test-Schnipsel ich verwendet:

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

Answer 2

Können Sie mehr Code als die beiden Zeilen schreiben Sie zur Verfügung gestellt haben ? Ich glaube, es ist etwas mehr als wo Sie die Breite/Höhe eingestellt haben.

Ich habe eine Zeichnungsapplikation, an der ich schon eine Weile herumgebastelt habe und in der ich fast das Gleiche mache. Der einzige Unterschied ist, dass ich vor der Einstellung der Breite und Höhe context.scale(0,0); aufrufen. Ich habe keine Probleme in einer Version von Google Chrome mit einem blauen Overlay. Ändern Sie möglicherweise den Skalierungswert des Kontexts, bevor Sie die Breite und Höhe festlegen?

z.B. hier ist das, was ich habe, die Einstellung der Leinwand Breite/Höhe für eine Voll Dokument Zeichenfläche zu dokumentieren:

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

edit: meine Bastelei Website erwähnt ist bei http://drawcomix.com, wenn Sie den blauen Overlay sehen testen möchten, wenn es Ihr Browser oder Ihr Code.

edit: basierend auf dem zusätzlichen Kommentar ...

ich Tutorials im Internet gesehen habe, dass die beste Art und Weise schlägt die Leinwand zu löschen ist, die Höhe/Breite einzustellen. Das stimmt nicht ganz. Auf Dokument lädt, kann es der schnellste/einfachste Weg, dies zu tun, aber auf Mausbewegungen, sind Sie wahrscheinlich besser dran, so etwas wie dies zu tun:

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

Sie können nicht setTransform benötigen, wenn Sie nicht gerade ausführen alle Transformationen auf der Leinwand.

Ich glaube, ich fand diese Lösung in Pro HTML5 Programmierung (Apress), aber ich bin mir nicht sicher.