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.

Key Features:

• Automatically generates handwritten signatures from text you type.
• Or draw signatures with mouse drag or touch swipe events.
• Store and get signatures using JSON.

Dependencies:

• jQuery
• json2.js
• FlashCanvas (Only required for IE 9-)

More examples:

• Accept multiple signatures
• Accept signature
• Draw smoothed vs linear
• Full window
• Regenerate Signature
• Regenerate smoothed vs linear
• Require drawn signature
• Require drawn signature

Basic Usage:

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

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

2. Create the html for a signature pad.

<form method="post" action="" class="sigPad">
  <label for="name">Type your name</label>
  <input type="text" name="name" id="name" class="name">
  <p class="typeItDesc">Review your signature</p>
  <p class="drawItDesc">Draw your signature</p>
  <ul class="sigNav">
    <li class="typeIt"><a href="#type-it" class="current">Type It</a></li>
    <li class="drawIt"><a href="#draw-it" >Draw It</a></li>
    <li class="clearButton"><a href="#clear">Clear</a></li>
  </ul>
  <div class="sig sigWrapper">
    <div class="typed"></div>
    <canvas class="pad" width="198" height="55"></canvas>
    <input type="hidden" name="output" class="output">
  </div>
  <button type="submit">I accept the terms of this agreement.</button>
</form>

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

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- json2.js -->
<script src="/path/to/json2.min.js"></script>

<!-- signature pad -->
<script src="/path/to/jquery.signaturepad.js"></script>

<!-- for IE -->
<!--[if lt IE 9]>
  <script src="/path/to/flashcanvas.js"></script>
<![endif]-->

4. Initialize the signature pad by calling the function on the form element.

$(function(){
  $('.sigPad').signaturePad();
});

5. Regenerate the signature from JSON data.

$('.sigPad').signaturePad({
  displayOnly:true
}).regenerate(sig);

// signature data
var sig = [
    {"lx":20,"ly":34,"mx":20,"my":34},
    {"lx":21,"ly":33,"mx":20,"my":34},
    {"lx":22,"ly":31,"mx":21,"my":33},
    {"lx":23,"ly":30,"mx":22,"my":31},
    {"lx":25,"ly":27,"mx":23,"my":30},
    {"lx":27,"ly":25,"mx":25,"my":27},
    {"lx":29,"ly":23,"mx":27,"my":25},
    ...
]

6. All possible options to customize the signature pad.

$('.sigPad').signaturePad({

  // 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'
  
})

7. Callback functions available.

$('.sigPad').signaturePad({

  // executed before the form is validated
  onBeforeValidate : function (context, settings){
    //  do something
  }

  // executed when the form is invalid
  onFormError : function (errors, context, settings){
    //  do something
  }

  // executed every time the user draws a new segment in their signature
  onDraw : function (){
    //  do something
  }

  // executed whenever the user completes their drawing segment
  onDrawEnd : function (){
    //  do something
  }

})

8. API methods.

var instance = $('.sigPad').signaturePad();

// clear all
instance.clearCanvas();

// get the signature as a JS array
instance.getSignature();

// get the signature as a JSON string
instance.getSignatureString();

// get the signature as a Base64 encoded PNG
instance.getSignatureImage();

// update options
instance.updateOptions(options);

// check if the form is valid
instance.validateForm(); 

Changelog:

2021-01-23

• Doc updated

2020-06-21

• Fixed: when you start drawing by mouse and change to drawing by touch , the mouse button stay triggered. causing the undesired drawing on the canvas.

v2.5.2 (2019-10-30)

• Fix issue where it does not capture signature on desktop browsers

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.