CanvasRenderingContext2D: save() method

The CanvasRenderingContext2D.save() method of the Canvas 2D API saves the entire state of the canvas by pushing the current state onto a stack.

Syntax

save()

Parameters

None.

Return value

None (undefined).

Description

The drawing state that gets saved onto a stack consists of:

The current transformation matrix.
The current clipping region.
The current dash list.
The current values of the following attributes:

Examples

undefined

Saving the drawing state

This example uses the save() method to save the current state and restore() to restore it later, so that you are able to draw a rect with the current state later.

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);

Result

Specifications

HTML