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:

• Smooth Signature Pad Plugin with jQuery and Html5 Canvas
• Simpe Mobile Signature Pad with jQuery and Html5 Canvas

How to use it:

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

<script src="//code.jquery.com/jquery-2.1.4.min.js"></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-width="600" 
     data-height="200" 
     data-border="1px solid #1ABC9C" 
     data-background="#16A085" 
     data-line-color="#fff" 
     data-auto-fit="true">
</div>

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">
  
</div>

5. The JavaScript to enable the signature field.

$(document).on('ready', function() {
  $('.js-signature').jqSignature();
});

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

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

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

6. You can also pass the options during initialization.

$('.js-signature').jqSignature({

// 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.
$().jqSignature('clearCanvas');

// Get the contents of the signature canvas as a base64 data URL.
$().jqSignature('getDataURL'); 

Change log:

2016-07-14

• bumping to v1.1.0

2016-07-12

• IE Fix.

2015-09-05

• 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.