I have a concept for a program I want to make. I want to making some sort of drawing program that allows you to draw lines on the page, saves it, and then when another user views the same page, he can see the drawing that the first user made and edit it as well. This will all be online, presumably using HTML5 canvas.
I think I can figure out the drawing part okay: when a user’s mouse is clicked, the program will essentially fill in a sequence of circles that tracks the mouse’s movements. However, what I’m having a hard time figuring out is how to persist the drawings. The best solution I can think of right now is taking a “snapshot” of the drawing and saving that in some format, but as the drawing gets bigger, that would mean there’s a huge file getting saved and sent from the server to clients, which sounds far from ideal.
Can someone provide suggestions on how to persist and save these drawings in an efficient way?
HTML5 pixel data can be exported and imported as PNG image easily. The pixel data size depends solely on dimensions, not how many drawing commands have been applied as it is bitmap buffer based, not vector based.
Export using toDataURL():
Capture HTML Canvas as gif/jpg/png/pdf?
Save data to server.
Import the existing image by simply loading it as
<img>and drawing the image on<canvas>usingdrawImage().