HTML5 canvas after cleaning

Question

I have a function that draws a collection of images on a canvas and saves it afterwards.

Then on the command line, I run:

canvas.save(); canvas.clearRect(0,0,415,415); canvas.restore(); 

I expect him to restore it, but he does nothing. Any help, I can’t find anything on google about launching in this series, and I have had this problem several times in the past.

Answer 1

You misinterpret what save does. It saves the state of the canvas, which is affected by rotate , translate , scale , etc. It does not save any actual canvas contents. If you want to save what is actually on the canvas, try saving it in a hidden canvas. Assuming you added a hidden canvas to html and got its context object ( canvas2 ), the following should save it:

 canvas2.drawImage(canvas, 0, 0) 

And then, to restore it:

 canvas.drawImage(canvas2, 0, 0) 

Answer 2

You can use getImageData and putImageData to save and restore the contents of the canvas.

 tmp = context.getImageData(0,0,415,415); context.clearRect(0,0,415,415); context.putImageData(tmp,0,0);