Warum ist putImageData so langsam?

Question

Ich arbeite mit einem relativ großen Canvas, auf dem verschiedene (komplexe) Dinge gezeichnet werden. Dann möchte ich den Zustand des Canvas speichern, damit ich ihn später schnell wieder in den aktuellen Zustand zurücksetzen kann. Dazu verwende ich getImageData und speichere die Daten in einer Variablen. Dann zeichne ich noch etwas auf die Leinwand und setze die Leinwand später mit putImageData wieder in den Zustand zurück, in dem sie sich beim Speichern befand.

Es hat sich jedoch herausgestellt, dass putImageData sehr langsam ist. Es ist sogar langsamer als das Neuzeichnen des gesamten Canvas von Grund auf, was mehrere drawImage-Operationen erfordert, die den größten Teil der Oberfläche abdecken, und über 40.000 lineTo-Operationen, gefolgt von Strichen und Füllungen.

Das Neuzeichnen der ca. 2000 x 5000 Pixel großen Leinwand von Grund auf dauert ca. 170 ms, die Verwendung von putImageData dauert jedoch satte 240 ms. Warum ist putImageData so langsam im Vergleich zum Neuzeichnen des Canvas, obwohl das Neuzeichnen des Canvas das Füllen fast des gesamten Canvas mit drawImage und dann wieder das Füllen von etwa 50% des Canvas mit Polygonen mit lineTo, stroke und fill beinhaltet. Im Grunde wird also jedes einzelne Pixel beim Neuzeichnen mindestens einmal berührt.

Weil drawImage so viel schneller zu sein scheint als putImageData (immerhin dauert der drawImage-Teil des Neuzeichnens der Leinwand weniger als 30 ms). Ich beschloss zu versuchen, den Zustand der Leinwand nicht mit getImageData, sondern mit canvas.toDataURL zu speichern und dann ein Bild aus der Daten-URL zu erstellen, das ich in drawImage einfügen würde, um es auf die Leinwand zu zeichnen. Es stellte sich heraus, dass dieser ganze Vorgang viel schneller ist und nur etwa 35 ms dauert.

Warum ist also putImageData so viel langsamer als die Alternativen (Verwendung von getDataURL oder einfaches Neuzeichnen)? Wie könnte ich die Dinge weiter beschleunigen? Gibt es und wenn, was ist im Allgemeinen der beste Weg, um den Zustand einer Leinwand zu speichern?

(Alle Zahlen wurden mit Firebug von Firefox aus gemessen)

Answer 1

Nur ein kleiner Hinweis darauf, wie dies am besten zu bewerkstelligen ist. Ich habe meine Bachelor Thesis über Leistungsstarkes ECMAScript und HTML5 Canvas (pdf, Deutsch; Kennwort: stackoverflow), so dass ich mittlerweile einiges an Fachwissen zu diesem Thema gesammelt habe. Die eindeutig beste Lösung ist die Verwendung mehrerer Canvas-Elemente. Das Zeichnen von einem Canvas auf ein anderes Canvas ist genauso schnell wie das Zeichnen eines beliebigen Bildes auf ein Canvas. Somit ist das "Speichern" des Zustands eines Canvas genauso schnell wie das spätere Wiederherstellen, wenn man zwei Canvas-Elemente verwendet.

Dieser jsPerf-Testfall zeigt die verschiedenen Ansätze und ihre Vor- und Nachteile sehr deutlich auf.

Nur der Vollständigkeit halber, hier wie Sie wirklich sollte es tun:

// setup
var buffer = document.createElement('canvas');
buffer.width = canvas.width;
buffer.height = canvas.height;

// save
buffer.getContext('2d').drawImage(canvas, 0, 0);

// restore
canvas.getContext('2d').drawImage(buffer, 0, 0);

Diese Lösung ist, je nach Browser, bis zu 5000x schneller als diejenige, die die Upvotes erhält.

Answer 2

In Firefox 3.6.8 war ich in der Lage, die Langsamkeit von putImageData zu umgehen, indem ich stattdessen toDataUrl/drawImage verwendete. Für mich arbeitet es schnell genug, dass ich es innerhalb der Behandlung eines mousemove-Ereignisses aufrufen kann:

Zum Sparen:

savedImage = new Image()
savedImage.src = canvas.toDataURL("image/png")

Die wiederherzustellen:

ctx = canvas.getContext('2d')
ctx.drawImage(savedImage,0,0)

Answer 3

Erstens sagen Sie, dass Sie mit Firebug messen. Ich finde tatsächlich, dass Firebug verlangsamt JS Ausführung erheblich, so dass Sie möglicherweise nicht immer gute Zahlen für die Leistung.

In Bezug auf putImageData Ich vermute, das liegt daran, dass die Funktionen ein großes JS-Array mit vielen Number Objekte, die alle auf ihren Bereich (0..255) geprüft und in einen nativen Canvas-Puffer kopiert werden müssen.

Vielleicht, sobald die WebGL ByteArray Typen verfügbar sind, kann diese Art von Dingen schneller gemacht werden.

Es scheint seltsam, dass die Base64-Dekodierung und Dekomprimierung der Daten (mit der PNG-Daten-URL) schneller ist, aber das ruft nur eine JS-Funktion mit einer JS-Zeichenfolge auf, so dass es hauptsächlich nativen Code und Typen verwendet.

Answer 4

Dies liegt vermutlich daran, dass moderne Browser die Hardware-Beschleunigung für <canvas> Elemente, und getImageData() / putImageData() die Übertragung von Bilddaten von der Grafikkarte zum Host oder umgekehrt erfordern. Das ist bekanntermaßen langsam.

Die Verwendung von zwei Leinwänden ist schneller, da alle Daten auf der Grafikkarte bleiben.