Touch-enabled Signature Plugin with jQuery and Canvas

File Size: 10.2 KB
Views Total: 12047
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Touch-enabled Signature Plugin with jQuery and Canvas

Signature is a lightweight jQuery plugin that creates an Html5 canvas based signature pad for smooth, touch-enabled signature drawing.

See also:

How to use it:

1. Add the latest jQuery library and the jQuery signature plugin into the web page.

<script src="//"></script>
<script src="jq-signature.js"></script>

2. Create a signature field as follow. You can pass the options to the signature field using Html5 data-option attributes.

<div class="js-signature" 
     data-border="1px solid #1ABC9C" 

3. Create buttons to clear and save your signature.

<button id="clearBtn" onclick="clearCanvas();">Clear Canvas</button>
<button id="saveBtn" onclick="saveSignature();" disabled>Save Signature</button>

4. Create an empty element to place your saved signature for download.

<div id="signature">

5. The JavaScript to enable the signature field.

$(document).on('ready', function() {

function clearCanvas() {
  $('#signature').html('<p><em>Your signature will appear here when you click "Save Signature"</em></p>');
  $('#saveBtn').attr('disabled', true);

function saveSignature() {
  var dataUrl = $('.js-signature').jqSignature('getDataURL');
  var img = $('<img>').attr('src', dataUrl);
  $('#signature').append($('<p>').text("Here's your signature:"));

$('.js-signature').on('jq.signature.changed', function() {
  $('#saveBtn').attr('disabled', false);

6. You can also pass the options during initialization.


// The color of the signature
lineColor: '#222222',

// The width of the signature line
lineWidth: 1,

// The CSS for the border of the canvas.
border: '1px dashed #AAAAAA',

// The CSS for the background of the canvas. 
background: '#FFFFFF',

// The width of the signature canvas (in pixels)
width: 300,

// The height of the signature canvas (in pixels).
height: 100,

// Make the canvas fill the width of its parent element. 
autoFit: false


7. Methods.

// Clears the signature canvas.

// Get the contents of the signature canvas as a base64 data URL.

Change log:


  • bumping to v1.1.0


  • IE Fix.


  • Fixing clearCanvas bug in IE11/Edge

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