CanvasRenderingContext2D.save()

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

The drawing state

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

Syntax

void ctx.save();

Examples

Saving the drawing state

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

HTML

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

JavaScript

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

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

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

// Restore the default state
ctx.restore();

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

Result

Specifications

Specification
HTML Standard
# dom-context-2d-save-dev

Browser compatibility

BCD tables only load in the browser

See also