Customizable Signature Pad Plugin With jQuery

File Size: 40.6 KB
Views Total: 5383
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Customizable Signature Pad Plugin With jQuery

A lightweight yet fully configurable Signature Pad plugin used to draw a downloadable electronic signature on an HTML canvas element.

More Features:

  • Customizable background and signature colors.
  • With or without a guideline.
  • Export signature as SVG, PNG, JPG, or JSON.

How to use it:

1. Load the necessary jQuery and jQuery UI on the HTML page.

<link rel="stylesheet" href="/path/to/cdn/jquery-ui.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>

2. Download the plugin and load the following files in the document.

<link href="css/jquery.signature.css" rel="stylesheet" />
<script src="js/jquery.signature.js"></script>

3. Create an empty DIV element that serves as the container for the signature pad.

<div id="sig"></div>

4. Call the function on the DIV container to generate a default signature pad.

var sig = $('#sig').signature();

5. Customize the appearance of the signature pad.

var sig = $('#sig').signature({

    // The minimum distance to start a drag.
    distance: 0,

    // The background colour.
    background: '#fff',

    // The colour of the signature.
    color: '#000',

    // The thickness of the lines.
    thickness: 2

6. Determine whether to show a guideline on the pad.

var sig = $('#sig').signature({

    // enable/disable the guideline
    guideline: false,

    // guideline colour.
    guidelineColor: '#a0a0a0',

    // guideline offset (pixels) from the bottom
    guidelineOffset: 50,

    // guideline indent (pixels) from the edges
    guidelineIndent: 10


7. Determine the output file type.

var sig = $('#sig').signature({

    // 'JSON', 'SVG', 'PNG', 'JPEG'
    syncFormat: 'JSON',

    // determine whether to use the style attribute in SVG
    svgStyles: false,


8. Specify the selector, DOM element, or jQuery object for an input field to automatically synchronize with a text version of the signature.

var sig = $('#sig').signature({

    syncField: null


9. Customize the error message to show if the browser doesn't supports HTML5 canvas.

var sig = $('#sig').signature({

    notAvailable: 'Your browser doesn\'t support signing',


10. Determine the scale factor.

var sig = $('#sig').signature({

    scale: 1


11. Trigger a function every time the signature changes.

var sig = $('#sig').signature({

    change: null


12. API methods.

// update options
sig.signature('option', settings);

// update an option
sig.signature('option', name, value); 
// retrieve options

// retrieve an option
sig.signature('option', name);
// enable/disable the instance

// clear signature

// check if is empty

// convert the signature to an image (data:URL)

// convert the signature to JSON 

// convert the signature to SVG 

// draw the signature from JSON, SVG, or a data: URL
sig.signature('draw', sig);
// destroy the instance

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