Canvas speichern und wiederherstellen: ctx.save und ctx.restore

ctx.save speichert nicht den Canvas, nur den Zeichen-Kontext

canvas.save speichert nicht den Inhalt des Canvas mit seinen aktuellen Formen und Farben, sondern die aktuellen Einstellungen der Zeichenwerkzeuge wie fill und stroke. Dementsprechend holt canvas.restore die Einstellungen wieder zurück.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Der Canvas-Context – Zustand der Zeichnung

Jeder Context enthält einen Stack von Zeichenzuständen. Ein Zeichenzustand besteht aus:

  • Der aktuellen Transformations-Matrix,
  • der aktuellen Clipping-Region.
  • den aktuellen Werten für die Attribute: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline.

Der aktuelle Pfad und die aktuelle Bitmap sind kein Bestandteil des Zeichenzustands. Ein Pfad kann nur durch beginPath() zurückgesetzt werden. Die aktuelle Bitmap ist eine Eigenschaft des Canvas und nicht der Kontext.

context.save()

Packt den aktuellen Zustand auf den Stack.

context.restore()

Entfernt den obersten Zustand vom Stack und stellt den Context auf diesen Zustand.

Transformationen des Context

Bei einer Transformation wird das gesamte Koordinatensystem des Context transformiert.

Canvas Context Save and Restore
Canvas Kontext speichern und wiederherstellen

Nach der Transformation soll das Koordinatensystem wieder zurück in den normalen Zustand, bevor der nächste Schritt ausgeführt wird.

Würde der Weg zurück durch eine weitere Transformation durchgeführt, könnten kleine Fehler entstehen, die sich im Handumdrehen zu großen Abweichungen addieren. Da ist es einfacher, die normalen Koordinaten am Anfang zu speichern und nach der Transformation zu restaurieren.

Der Kontext-Stapel

Die ersten drei Formen des Beispiels bauen ihren eigenen Context auf: Füllfarbe und Schatten. Ist das Rechteck festgelegt, wird sein Context als neuster Kontext oben auf dem Kontext-Stapel gespeichert, bevor die Anweisungen für ein neues Rechteck beginnen.

Nach dem dritten Rechteck wird der Kontext nicht gespeichert, sondern der Kontext bleibt für den grünen Kreis aktiv. ctx.restore holt dann wieder den Context des zweiten Elements (rosa Rechteck) für den rosa Kreis hervor, das nächste ctx.restore den Context des ersten Element (pink Rechteck).

Die gespeicherten Zustände verhalten sich wie die Scheiben im Spiel Türme von Hanoi: Jeder neue Kontext wird oben auf dem Hash abgelegt.

Canvas als Bild speichern

Der Canvas wird mit canvas.toDataURL () als Bild gespeichert.

document.querySelector("#toData").onclick = function () {
    var dataURL = canvas.toDataURL();
    document.querySelector("#canvasImg").src = dataURL;
    document.querySelector("#canvasImg").width = 500;
    document.querySelector("#canvasImg").height = 50;
}

Dem Benutzer die Bitmap des Canvas zum Download anzubieten ist nicht ganz so einfach wie es scheint.

document.querySelector("#simpleDownload").addEventListener("click", function () {
	var image_data = canvas.toDataURL("image/png");
	// Neues Fenster für die Bilddaten
	window.open(image_data);
});

Eine solide Lösung für die ganz alten Browser wie IE11 sendet die Bilddaten (image_data) an ein PHP-Script auf dem Server.

Idee für PHP-Script: How to save an HTML5 Canvas as an image on a server?