Canvas restore() 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 restore() method restores the state of a saved drawing context:

clipping, transformation, direction, fillStyle, font, globalAlpha, globalCompositeOperation, imageSmoothingEnabled, lineCap, lineDashOffset, lineJoin, lineWidth, miterLimit, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, strokeStyle, textAlign, and textBaseline.

Syntax

context.restore()

Parameters

NONE

Return Value

NONE

Browser Support

The <canvas> element is an HTML5 standard (2014).

restore() is supported in all modern browsers:


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

❮ Canvas Reference