Touch-friendly Signature Field Plugin For jQuery - jSignature

File Size: 191 KB
Views Total: 18391
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Touch-friendly Signature Field Plugin For jQuery - jSignature

jSignature is a jQuery plugin that lets you create a mobile-friendly, cross-browser, canvas based signature field using HTML5 canvas. The plugin has the ability to extract signature data as multiple file formats such as native, image, base30, image/jsignature;base30, SVG, image/svg+xml, svgbase64, image/svg+xml;base64 and more.

Basic usage:

1. Load the main JavaScript file jSignature.js and the jSignature's plugins of your choice in the document.

  • jSignature.CompressorBase30.js: custom "base30" format export and import plugin
  • jSignature.CompressorSVG.js: SVG export plugin
  • jSignature.UndoButton.js: Undo Button and undo functionality plugin
  • jSignature.SignHere.js: Sign Here "sticker" plugin
<!-- required JS files -->
<script src="//"></script>
<script src="jSignature.js"></script>

<!-- optional plugins -->
<script src="plugins/jSignature.CompressorBase30.js"></script>
<script src="plugins/jSignature.CompressorSVG.js"></script>
<script src="plugins/jSignature.UndoButton.js"></script> 
<script src="plugins/signhere/jSignature.SignHere.js"></script> 

2. Create a container element for the Signature Field. jSignature inherits colors from parent element. Text = Pen color. Background = Background. (This works even when Flash-based Canvas emulation is used.)

<div id="signatureparent">
  <div id="signature"></div>

3. Initialize/enable the Signature Field with default options.


4. Customize the Signature Field with the following options.


  // line color

  // line width

  // width/height of signature pad

  // background color

5. API methods:

// Resets the signature pad

// Destroy the signature pad

// Returns a data object appropriate for the data format
$("#signatureContainer").jSignature('getData', FORMATNAME);

// Sets data
$("#signatureContainer").jSignature('setData', DATAOBJECT, FORMATNAME);

// Disables the signature pad

// Re-enable the signature pad

// Returns a boolean true if the jSignature was modified

// Returns the configurable settings

// Updates certain settings
$("#signatureContainer").jSignature('updateSetting', SETTINGNAME, VALUE, Boolean);



  • Added hasEventListener check for addEventListener addition to fix issues with ontouchstart on Windows 10


  • v2.1.2

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