HTML5 Canvas Reference - restore()

The restore() method reset the canvas by "popping" the last state saved to the stack.

Browser compatibility


`restore()`	Yes	Yes	Yes	Yes	Yes

Javascript Syntax

context.restore()

Example

The following code pushes and pops the drawing states.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width='500px' height='200px'/>
<script type='text/javascript'>
    var stage= document.getElementById('canvas');
    var ctx = stage.getContext('2d');
<!--   w ww. j  a  va  2s .c  o  m-->
    // Save previous origin (among other things)
    ctx.save();
    // Move origin to "middle" of canvas
    ctx.translate(200,200)
    ctx.fillStyle = "red";
    // draw rectange with x & y relative to new origin
    ctx.fillRect(-50, -50, 100, 100);
    // Reset origin
    ctx.restore();
    ctx.fillStyle = "blue";
    // draw rectange with x & y relative to original origin
    ctx.fillRect(0, 0, 50, 50);
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to save and restore several drawing state.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
   var canvas = document.getElementById("canvas");
   var context = canvas.getContext("2d");
   <!--   w ww.j  ava  2s .  c  o  m-->
   var rectWidth = 150;
   var rectHeight = 75;
   
   context.save(); // save state 1
   context.translate(canvas.width / 2, canvas.height / 2);
   
   context.save(); // save state 2
   context.rotate(Math.PI / 4);
   
   context.save(); // save state 3
   context.scale(2, 2);
   
   context.fillStyle = "blue";
   context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
   
   context.restore(); // restore state 3
   context.fillStyle = "red";
   context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
   
   context.restore(); // restore state 2
   context.fillStyle = "yellow";
   context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
   
   context.restore(); // restore state 1
   context.fillStyle = "green";
   context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
</script>
</body>
</html>

The code above is rendered as follows: