How save canvas state to db?

Question

So I built this real-time drawing app with node.js, socket.io, and html5 canvas. Every pixel that the mouse is moved while clicked is tracked and broadcast (to display drawing input on other computers).

I know it is possible to save an image of the canvas but this canvas is very large (10000x10000+ pixels). Right now, when the page is refreshed all the drawings are gone (as it was just send over a socket, nothing saved).

I would like to save all the canvas data to a db and then somehow rewrite it when the page is loaded again, but it is simply too much. How would you go about doing this??

Answer 1

You can track the clicks and mouse moves that made the canvas look that way while you're sending them over the socket, and simulate them to rebuild the image.