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]()
Demo
Downloads
Download Code
