Canvas Save and Restore Method in HTML5

HTML5 Save() and Restore() method

The HTML5 canvas provides two important methods to save and restore the canvas states.

Let us now define the save() and restore() methods.

Each context maintains a stack of drawing states. Drawing states consist of:

Current transformation matrix.
Current matrix region.
The current values of the following attributes: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign and textBaseline.

When you use the save() method, all the attributes that you define before save() are pushed into a stack. You can push any number of attribute sets onto the stack. You can then use the restore() method to pop each set of attributes out of the stack in the reverse order in which they were pushed.

One of the most common uses of the "save()" and "restore()" methods is for transformations.

In the following example I am saving three sets of attributes and then restoring them one by one for every "fillText()" method. When you execute the code, notice that the attributes of the text are applied in reverse order.

Method	Description
save()	This method pushes the current state onto the stack.
restore()	This method pops the top state on the stack, restoring the context to that state.

Step 1:

First define the first attribute set 1 by setting the fillStyle and shadow properties. Then we call "ctx.save()" that adds our settings to the stack.

//This is attribute set 1
ctx.font = "25px verdana";
ctx.fillStyle = "yellow";
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 2;
ctx.shadowColor = "grey";
//Let's push the attributes into the stack. Since this set of attributes is the first one into the stack, it will be the last one out
ctx.save();

Step 2

Next,define the second attribute set 2 by setting the fillStyle and shadow properties. Then we call "ctx.save()" that adds our settings to the stack.

//This is attribute set 2
var fillColor = ctx.createLinearGradient(100, 10, 200, 10);
fillColor.addColorStop(0.4, "red");
fillColor.addColorStop(0.6, "green");
ctx.fillStyle = fillColor;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 2;
ctx.shadowColor = "pink";
// Push attribute set 2 into the stack. This will be the second set to be restored.
ctx.save();

Step 3:

Next, define the third attribute set 3 by setting the fillStyle and shadow properties. Then we call "ctx.save()" that adds our settings to the stack.

//This is attribute set 3
ctx.fillStyle = "rgba(0,0,255,0.5)";
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 2;
ctx.shadowColor = "#c8ffc8";
//Push attribute set 3 into the stack. This is the last set we are pushing inside. So it will be the first one to be restored.
ctx.save();

Step 4:

The "Restore()" method pops the top state on the stack, restoring the context to that state.

Start popping the stack. Restore attribute set 3:

ctx.restore();
ctx.fillText("Noida", 5, 20);
Step 5:
Restore attribute set 2:
ctx.restore();
ctx.fillText("Noida", 100, 20);

Step 6:

Restore attribute set 1:

ctx.restore();
ctx.fillText("Noida", 200, 20);

Example

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
//This is attribute set 1
ctx.font = "25px verdana";
ctx.fillStyle = "yellow";
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 2;
ctx.shadowColor = "grey";
//Let's push the attributes into the stack. Since this set of attributes is the first one into the stack, it will be the last one out
ctx.save();
//This is attribute set 2
var fillColor = ctx.createLinearGradient(100, 10, 200, 10);
fillColor.addColorStop(0.4, "red");
fillColor.addColorStop(0.6, "green");
ctx.fillStyle = fillColor;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 2;
ctx.shadowColor = "pink";
// Push attribute set 2 into the stack. This will be the second set to be restored.
ctx.save();
//This is attribute set 3
ctx.fillStyle = "rgba(0,0,255,0.5)";
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 2;
ctx.shadowColor = "#c8ffc8";
//Push attribute set 3 into the stack. This is the last set we are pushing inside. So it will be the first one to be restored.
ctx.save();
// Start popping the stack. Restore attribute set 3
ctx.restore();
ctx.fillText("Noida", 5, 20);
// Restore attribute set 2
ctx.restore();
ctx.fillText("Noida", 100, 20);
//Restore attribute set 1
ctx.restore();
ctx.fillText("Noida", 200, 20);
}
}
</script>
<title>Save and restore Method</title>
</head>
<body onload="init();">
<canvas id="canvas" width="600" height="300"></canvas>
<br>
</body>
</html>

Output