In this article I will explain with an example, how to capture Signatures online on Web Page, IPads, Mobile Phones or Tables using HTML5 Canvas and jQuery Sketch plugin.
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.
Below the HTML5 Canvas element, there’s an HTML Button and an Image 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">
</canvas>
<br />
<br />
<input type="button" id="btnSave" value="Save as Image" />
<hr />
<img id = "imgCapture" alt = "" style = "display:none;border:1px solid #ccc" />
Using HTML5 Canvas to capture Signatures with 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.
The HTML Button has been assigned a jQuery click event handler and when the Button is clicked the HTML5 Canvas Drawing is converted to a Base64 string using the HTML5 Canvas toDataURL function and then assigned as source to the HTML Image 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");
});
$("#btnSave").bind("click", function () {
var base64 = $('#colors_sketch')[0].toDataURL();
$("#imgCapture").attr("src", base64);
$("#imgCapture").show();
});
});
</script>
Screenshot
![Using HTML5 Canvas to capture Signatures with jQuery]()
Demo
Downloads
