It feels like a little while since I last played around with the <canvas> element, so I spent some time over the weekend and put together a simple painting app using the canvas and here is the end result.
Here’s some screenshots:
One of the interesting things with this simple painting app is the spray tool, here’s what I did to achieve the effect:
The startDrawing function is called when the mouseDown or a subsequent mouseMove event is raised, it in turn sets up an interval event which is triggered every 10 milliseconds and draws one pixel using the currently configured colour within the radius of the mouse pointer.
When the mouseUp event is raised, the interval event handler is unbound.
Saving the Canvas to an Image
One of the cool things you can do with the <canvas> element is the ability to get a data:URL containing a representation of the image as a PNG file, which you can then use as the source for an <img> element so that the user can then save.
The code required to do this is as simple as calling toDataURL() on the <canvas> element and then use the returned value to set the src property on the <img> element.
If you’re interested in the source code, you can get it off github here.
Subscribe to my newsletter and get new contents delivered straight to your inbox :-)