In this article I will explain how to implement HTML5 Canvas Touch Screen and Mouse Sketchpad (Drawing) App in ASP.Net using jQuery Sketch plugin.
HTML5 Canvas Sketchpad (Drawing) App 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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/mobomo/sketch.js/master/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
![Implement HTML5 Canvas Touch Screen and Mouse Sketchpad (Drawing) App using jQuery]()
Demo
Downloads
Download Code
