CODEWITHSUNDEEP
javascripthtml5-canvas
H_end-rik
H_end-rik

Reputation: 591

Use Javascript to store and restore a canvas

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.

Upvotes: 3

Views: 5151

Answers (4)

H_end-rik
H_end-rik

Reputation: 591

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.

Upvotes: 1

Prasath K
Prasath K

Reputation: 5018

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           
}

Upvotes: 4

Lydon
Lydon

Reputation: 2975

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);
}

Upvotes: 0

Yannick Gottschalk
Yannick Gottschalk

Reputation: 93

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.com/js/js_cookies.asp

Upvotes: 0

Related Questions