Saving and Restoring Drawing State

We can save the drawing state and return to it later using the following methods: The saved drawing states are stored in a stack.

ValueDescription
save()Saves the values for the drawing state properties
restore()Pops the first set of values from the state stack
 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
      border: thin solid black;
      margin: 4px
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="140" preload="auto"> 
      Your browser doesn't support the <code>canvas</code> element 
      </canvas>
      <div>
            <button>Save</button>
            <button>Restore</button>
      </div>
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            var grad = ctx.createLinearGradient(500, 0, 500, 140);
            grad.addColorStop(0, "red");
            grad.addColorStop(0.5, "white");
            grad.addColorStop(1, "black");
            var colors = [ "blue", grad, "red", "green", "yellow", "black", "grey" ];
            var cIndex = 0;
            ctx.fillStyle = colors[cIndex];
            draw();
            var buttons = document.getElementsByTagName("button");
            
            for ( var i = 0; i < buttons.length; i++) {
                  buttons[i].onclick = handleButtonPress;
            }
            function handleButtonPress(e) {
                  switch (e.target.innerHTML) {
                  case 'Save':
                        ctx.save();
                        cIndex = (cIndex + 1) % colors.length;
                        ctx.fillStyle = colors[cIndex];
                        draw();
                        break;
                  case 'Restore':
                        cIndex = Math.max(0, cIndex - 1);
                        ctx.restore();
                        draw();
                        break;
                  }
            }
            function draw() {
                  ctx.fillRect(0, 0, 500, 400);
            }
      </script>
</body>
</html>
  
Click to view this demo.
Home 
  HTML CSS Book 
    HTML  

canvas:
  1. Getting Started with the Canvas Element
  2. Getting a Canvas Context
  3. Drawing Rectangles
  4. Canvas Drawing State
  5. Setting the Line Join Style
  6. Using Gradients
  7. Using Patterns
  8. Using smaller shapes with an image pattern
  9. Drawing Images
  10. Using Video Images
  11. Using Canvas Images
  12. Setting the Fill & Stroke Styles
  13. Saving and Restoring Drawing State
  14. Drawing Using Paths
  15. Drawing Arcs
  16. Drawing Bezier Curves
  17. Drawing Text
  18. Using Shadows
  19. Using Transparency
Related: