restore a canvas to status saved in another function? - Javascript Canvas

Javascript examples for Canvas:Example

  1. HOME
  2. Javascript
  3. Canvas
  4. Example

Description

restore a canvas to status saved in another function?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <style id="compiled-css" type="text/css">
canvas {//ww w .ja  va  2s. c  om
   border:1px solid red;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.fillRect(25, 25, 100, 100);
        var dataURL;
        $("#save").click(function () {
            dataURL = canvas.toDataURL();
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        });
        $("#reload").click(function () {
            var image = new Image();
            image.onload = function () {
                ctx.drawImage(image, 0, 0);
            }
            image.src = dataURL;
        });
    });

      </script> 
   </head> 
   <body> 
      <canvas id="canvas" width="300" height="300"></canvas> 
      <br> 
      <button id="save">Save</button> 
      <button id="reload">Reload</button>  
   </body>
</html>

Related Tutorials