Simple HTML5 Drawing App with Crayon, Marker, Paint Bucket and Eraser

I combined the code for two articles (Create HTML5 Drawing App and Paint Bucket Tool) to create a simple HTML5 drawing app with crayon, marker, paint bucket, and eraser tools.

View Demo

For more details see my tutorial that will take you step by step through the development of a simple web drawing application using HTML5 canvas and JavaScript: Create a Drawing App with HTML5 Canvas and JavaScript.

Further detail on the paint bucket tool is available in my tutorial: Create a Paint Bucket Tool in HTML5 and JavaScript where I cover implementing a flood fill algorithm using the HTML5 imageData object for pixel manipulation.


A demo is available which was updated on .

Source Code

Source code is available on GitHub:


Related Articles