Smooth Signature Pad Plugin with jQuery and Html5 Canvas

Smooth Signature Pad Plugin with jQuery and Html5 Canvas

Signature Pad is a jQuery plugin that takes advantage of HTML5 canvas element and javascript to create a flexible and smooth Signature Pad on your web page & app.

The plugin also has the ability to record the drawn signature in JSON for later regeneration. Be aware that the jquery plugin also requires Numeric Javascript library and bezier curve helper included.

More examples:

Basic Usage:

1. Include the required jQuery Signature Pad stylesheet in the head section of your page.

<link href="../assets/jquery.signaturepad.css" rel="stylesheet">

2. Create the html for a signature pad.

<div class="sigPad" id="smoothed" style="width:404px;">
<h2>Bezier Curves (constant pen width)</h2>
<ul class="sigNav">
<li class="drawIt"><a href="#draw-it" >Draw It</a></li>
<li class="clearButton"><a href="#clear">Clear</a></li>
<div class="sig sigWrapper" style="height:auto;">
<div class="typed"></div>
<canvas class="pad" width="400" height="250"></canvas>
<input type="hidden" name="output" class="output">

3. Load the necessary javascript library files at the bottom of your page.

<script src=""></script>
<script src="assets/numeric-1.2.6.min.js"></script> 
<script src="assets/bezier.js"></script> 
<script src="jquery.signaturepad.js"></script>
<script src="assets/json2.min.js"></script>

4. Call the plugin with options.

$(document).ready(function() {

5. All the options with default values.

$.fn.signaturePad.defaults = {
  // What action should be highlighted first: typeIt or drawIt
defaultAction : 'typeIt', 
// Initialize canvas for signature display only; ignore buttons and inputs
displayOnly : false, 
// Whether the to allow a typed signature or not
drawOnly : false, 
// Selector for selecting the canvas element
canvas : 'canvas,' 
// Parts of the signature form that require Javascript (hidden by default)
sig : '.sig', 
// The TypeIt/DrawIt navigation (hidden by default)
sigNav : '.sigNav', 
// The colour fill for the background of the canvas; or transparent
bgColour : '#ffffff', 
// Colour of the drawing ink
penColour : '#145394', 
// Thickness of the pen
penWidth : 2, 
// Determines how the end points of each line are drawn (values: 'butt', 'round', 'square')
penCap : 'round', 
// Colour of the signature line
lineColour : '#ccc', 
// Thickness of the signature line
lineWidth : 2, 
// Margin on right and left of signature line
lineMargin : 5, 
// Distance to draw the line from the top
lineTop : 35, 
// The input field for typing a name
name : '.name', 
// The Html element to accept the printed name
typed : '.typed', 
// Button for clearing the canvas
clear : '.clearButton', 
// Button to trigger name typing actions (current by default)
typeIt : '.typeIt a', 
// Button to trigger name drawing actions
drawIt : '.drawIt a', 
// The description for TypeIt actions
typeItDesc : '.typeItDesc', 
// The description for DrawIt actions (hidden by default)
drawItDesc : '.drawItDesc', 
// The hidden input field for remembering line coordinates
output : '.output', 
// The class used to mark items as being currently active
currentClass : 'current', 
// Whether the name, draw fields should be validated
validateFields : true, 
// The class applied to the new error Html element
errorClass : 'error', 
// The error message displayed on invalid submission
errorMessage : 'Please enter your name', 
// The error message displayed when drawOnly and no signature is drawn
errorMessageDraw : 'Please sign the document'

6. Callback functions available.

// Pass a callback to be used instead of the built-in function
onBeforeValidate : null,
// Pass a callback to be used instead of the built-in function
onFormError : null 
// Pass a callback to be used to capture the drawing process
onDraw : null 
// Pass a callback to be exectued after the drawing process
onDrawEnd : null 


v2.5.2 (2019-01-16)

  • Update drawSignature method

This awesome jQuery plugin is developed by thread-pond. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 16.01.2019
  • Source