I want to use JavaScript to store (somehow remember) the current state (the image shown by) of a canvas Element and then restore it later.

var cvSave;  //Global variable to save ImageData

function function1(){
//some stuff wich involes putting an image into a canvas
cvSave = context.getImageData(0,0,viewport.width, viewport.height);
// All the variables are existing and I use the context to put Stuff into the canvas which works fine
}

function isCalledLater(){
var canvas = document.getElementById('cv');
var ctx = canvas.getContext('2d');          //Get canvas and context
ctx.putImageData(cvSave,0,0);               //So this should restore the canvas to what I save earlier, right?
}

But when the second function is called it only turns the canvas white and does not restore it to what I think I saved in cvSave.

I want this to be clientside and I want to restore it to the state I save multiple times.

Also important (which I forgot at first) after restoring the canvas I want to use Processingjs to draw ontop of the restores image and then I want to be able to do this over again.

Thank you for helping.

I want to use JavaScript to store (somehow remember) the current state (the image shown by) of a canvas Element and then restore it later.

var cvSave;  //Global variable to save ImageData

function function1(){
//some stuff wich involes putting an image into a canvas
cvSave = context.getImageData(0,0,viewport.width, viewport.height);
// All the variables are existing and I use the context to put Stuff into the canvas which works fine
}

function isCalledLater(){
var canvas = document.getElementById('cv');
var ctx = canvas.getContext('2d');          //Get canvas and context
ctx.putImageData(cvSave,0,0);               //So this should restore the canvas to what I save earlier, right?
}

But when the second function is called it only turns the canvas white and does not restore it to what I think I saved in cvSave.

I want this to be clientside and I want to restore it to the state I save multiple times.

Also important (which I forgot at first) after restoring the canvas I want to use Processingjs to draw ontop of the restores image and then I want to be able to do this over again.

Thank you for helping.

• javascript
• html5-canvas

• are you forgetting to define a global variable that is used in function1 named context? – Parv Sharma Commented Mar 11, 2013 at 12:16

4 Answers 4

Hey try out this..

var cvSave;  //Global variable to save ImageData

function function1(){
//some stuff wich involes putting an image into a canvas
context.save();
// All the variables are existing and I use the context to put Stuff into the canvas which works fine
}

function isCalledLater(){
var canvas = document.getElementById('cv');
var ctx = canvas.getContext('2d');          //Get canvas and context
ctx.restore(); //So this should restore the canvas to what I save earlier, right?
ctx.save();  // this will save once again           
}

I tried out most of what was suggested here but for some reason nothing was working.

In the end I made it so that I had one state I would always want to restore to and saved that state by drawing the respective image into another canvas and getting it from there whenever I needed to.

You could use ajax with a web server which itself stores the data or cookies to store data as plain text. check this out: http://www.w3schools./js/js_cookies.asp

You could use

cvSave = canvas.toDataURL("image/png");
ctx.drawImage(cvSave,0,0);

I think you are missing something however. Try this

function function1(){
    var context = canvas.getContext('2d');
    cvSave = context.getImageData(0,0,viewport.width, viewport.height);
}