How to save canvas state in db?

Question

So, I built this real-time drawing application using node.js, socket.io and html5 canvas. Each pixel that the mouse moves when pressed is tracked and translated (to display drawing input on other computers).

I know that you can save a canvas image, but this canvas is very large (10000x10000 + pixels). Right now, when the page is being refreshed, all the drawings are gone (since it just sent over the socket, nothing was saved).

I would like to save all the canvas data in db, and then somehow rewrite it when the page is loaded again, but this is just too much. How would you do that?

Answer 1

You can track the clicks and mouse movements that made the canvas look that way while you were sending them through the socket, and simulate them to restore the image.