Take the 2-minute tour ×

Is there a way to save a canvas element's content to data such as binary? I'm looking to be able to redraw this data when needed.

Not really sure on how to go about it..

Thanks so much!!

share|improve this question
add comment

2 Answers

up vote 2 down vote accepted

You should be able to save the image into a variable like so: var imageVar = canvasObject.toDataURL();, and restore it again by calling canvasObject.drawImage(imageVar);

I haven't tested it yet, but the spec says it should work.

share|improve this answer
Thanks SphereCat1! toDataUrl() works but i couldn't get .drawImage to work. This gets me in the right direction though. Thanks! –  user239237 Feb 18 '10 at 22:58
add comment

I suppose you can send the innerHTML of whatever element contains the canvas element back to the server using AJAX and then zip it up server side.

However, this would be grossly inefficient to an alternate method of creating a data-based representation of of the content, and just storing that without all the unnecessary overhead of actual HTML markup.

share|improve this answer
But would this return the drawn data? I'm not sure it would.. –  user239237 Feb 10 '10 at 0:38
It would return the HTML necessary to create the image again on another HTML page. If you're looking for a jpg or something... That's something else. –  Mike Sherov Feb 10 '10 at 1:35
add comment

Your Answer


