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:
- The current transformation matrix.
- The current clipping region.
- The current dash list.
-
The current values of the following attributes:
strokeStyle
,fillStyle
,globalAlpha
,lineWidth
,lineCap
,lineJoin
,miterLimit
,lineDashOffset
,shadowOffsetX
,shadowOffsetY
,shadowBlur
,shadowColor
,globalCompositeOperation
,font
,textAlign
,textBaseline
,direction
,imageSmoothingEnabled
.
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
- The interface defining this method:
CanvasRenderingContext2D
CanvasRenderingContext2D.restore()