jQuery Signature

A jQuery plugin for creating touch-friendly signature fields using the HTML5 canvas.

Basic Example

Sign Below:

Installation

Download the file and include it in your HTML page:

You can also install it via:

bower: bower install jq-signature

npm: npm install jq-signature

Browser Compatibility

Tested and functioning in Chrome, Firefox, Safari 8, IE11, and Edge.

Developed using jQuery 2.1.4.

Usage

First, create a placeholder <div> for the signature canvas:

<div class='js-signature'></div>

Next, initialize the plugin in JavaScript:

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

Options

Configuration options can be set with the options parameter or through data-attributes.

OptionDescriptionData AttributeOptions Example
WidthThe width of the signature canvas (in pixels). Default: 300data-width="600"$().jqSignature({width: 600});
HeightThe height of the signature canvas (in pixels). Default: 100data-height="200"$().jqSignature({height: 200});
BorderThe CSS for the border of the canvas. Default: '1px solid #AAAAAA'data-border="1px solid red"$().jqSignature({border: '1px solid red'});
BackgroundThe CSS for the background of the canvas. Default: '#FFFFFF'data-background="#EEEEEE"$().jqSignature({background: '#EEEEEE'});
Line ColorThe color of the signature (as hex). Default: '#222222'data-line-color="#ABCDEF"$().jqSignature({lineColor: '#ABCDEF'});
Line WidthThe width of the signature line (in pixels). Default: 1data-line-width="2"$().jqSignature({lineWidth: 2});
Auto FitMake the canvas fill the width of its parent element. Default: falsedata-auto-fit="true"$().jqSignature({autoFit: true});

Methods

  • $().jqSignature('clearCanvas'); - Clears the signature canvas.
  • $().jqSignature('getDataURL'); - Get the contents of the signature canvas as a base64 data URL.

Events

  • jq.signature.changed - Fired when the signature changes (on mouseup/touchend)

Complete Example

Sign Below:

 

Your signature will appear here when you click "Save Signature"