The method I used to make Paint Share
is relatively straight forward.
Create a 3 dimensional array, with each cell on the X and Y axis representing a pixel. Use the Z axis to save the pixel's color data. In the application's editor, create a "pixel sprite" for each X and Y element, place it appropriately, and set its color. To keep things simple in Paint Share, I limited the palette to only 10 colors, and created a different frame for each color within the pixel sprite. I did this to make sure the game would work on platforms using Canvas2D (IE Mostly). If you're targeting WebGL enabled devices, you could probably get away with a single white sprite, and set it's color using shader effects.
Anytime the user makes an edit to the image, the appropriate cells and pixel update. To show a preview of an edit (like when drawing a shape/line), the appropriate pixels change color when the mouse button is down, and the appropriate cells are updated when the mouse button is released.
When you save a drawing locally, the array data is saved to webstorage. When the application is restarted, the array data is retrieved, and the image is redrawn in the application's editor. If a user wants to upload their image to the web for others to see, the canvas size changes to the size of the image, a screenshot is taken, the canvas size goes back to normal, and the png data goes to my server. That way, other users download images as png's rather than an array that renders a sprite per pixel.
Believe it or not, the hardest part about making the app was creating a flood fill tool.
Good luck!zatyka2013-07-09 04:42:33