In this article I will explain how to create Drawing and Painting App using HTML5, JavaScript and jQuery.
HTML5 Canvas Sketchpad application for Painting and Drawing will allow users to draw lines, scribble, write, sketch, etc. with mouse and touch screen.
 
 
HTML Markup
The HTML Markup consists of an HTML DIV consisting of two HTML Anchor elements for selecting Pen and Eraser for the HTML5 Canvas Sketchpad and an HTML5 Canvas element
<div class="tools">
    <a href="#colors_sketch" data-tool="marker">Marker</a> <a href="#colors_sketch" data-tool="eraser">
        Eraser</a>
</div>
<br />
<canvas id="colors_sketch" width="500" height="200" style="border: 1px solid #ccc">
</canvas>
 
 
Implementing HTML5 Canvas Sketchpad (Drawing) App using jQuery
Inside the jQuery document ready event handler, the jQuery HTML5 Sketch plugin is applied to the HTML5 Canvas element.
Both the HTML Anchor elements are assigned an HTML click event handler to highlight the selected element.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://intridea.github.io/sketch.js/lib/sketch.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#colors_sketch').sketch();
        $(".tools a").eq(0).attr("style", "color:#000");
        $(".tools a").click(function () {
            $(".tools a").removeAttr("style");
            $(this).attr("style", "color:#000");
        });
    });
</script>
 
 
Screenshot
Drawing and Painting App using HTML5, JavaScript and jQuery
 
 
Browser Compatibility

The above code has been tested in the following browsers only in versions that support HTML5.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
 
 
Downloads
HTML5_Canvas_Sketch.zip