CanvasRenderingContext2D: save()-Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Die CanvasRenderingContext2D.save() Methode der Canvas 2D API speichert den gesamten Zustand der Leinwand, indem sie den aktuellen Zustand auf einen Stapel schiebt.

Der Zeichen-Zustand

Der Zeichen-Zustand, der auf den Stapel gespeichert wird, besteht aus:

Der aktuellen Transformationsmatrix.
Der aktuellen Ausschnittsregion.
Der aktuellen Strichliste.
Die aktuellen Werte der folgenden Attribute:

Dieses Beispiel verwendet die save()-Methode, um den aktuellen Zustand zu speichern, und restore(), um ihn später wiederherzustellen, damit Sie in der Lage sind, später ein Rechteck mit dem aktuellen Zustand zu zeichnen.

HTML

html

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Save the current state
ctx.save();

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);

// Restore to the state saved by the most recent call to save()
ctx.restore();

ctx.fillRect(150, 40, 100, 100);