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
sig.signature('option');

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

// clear signature
sig.signature('clear');

// check if is empty
sig.signature('isEmpty');

// convert the signature to an image (data:URL)
sig.signature('toDataURL');

// convert the signature to JSON 
sig.signature('toJSON');

// convert the signature to SVG 
sig.signature('toSVG');

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

---

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