Canvas save() Method
Example
Save the state of the drawing context (font, styles, transformations, ...). Draw something different. Then, restore the state and continue drawing:
// Draw
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 50, 50);
// Save the state
ctx.save();
// Draw new
ctx.fillStyle = "red";
ctx.fillRect(100, 10, 50, 50);
// Restore saved state
ctx.restore();
// Draw new
ctx.fillRect(200, 10, 50, 50);
Try it Yourself »
Description
The save() method saves the state of the drawing context with all its attributes:
clipping, transformation, direction, fillStyle, font, globalAlpha, globalCompositeOperation, imageSmoothingEnabled, lineCap, lineDashOffset, lineJoin, lineWidth, miterLimit, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, strokeStyle, textAlign, and textBaseline.
See Also:
The restore() Method (Restore the context state)
Syntax
| context.save() |
Parameters
| NONE |
Return Value
| NONE |
Browser Support
The <canvas> element is an HTML5 standard (2014).
save() is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
❮ Canvas Reference
