Sign Below:
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
Tested and functioning in Chrome, Firefox, Safari 8, IE11, and Edge.
Developed using jQuery 2.1.4.
First, create a placeholder <div> for the signature canvas:
<div class='js-signature'></div>
Next, initialize the plugin in JavaScript:
$('.js-signature').jqSignature();
Configuration options can be set with the options parameter or through data-attributes.
| Option | Description | Data Attribute | Options Example |
| Width | The width of the signature canvas (in pixels). Default: 300 | data-width="600" | $().jqSignature({width: 600}); |
| Height | The height of the signature canvas (in pixels). Default: 100 | data-height="200" | $().jqSignature({height: 200}); |
| Border | The CSS for the border of the canvas. Default: '1px solid #AAAAAA' | data-border="1px solid red" | $().jqSignature({border: '1px solid red'}); |
| Background | The CSS for the background of the canvas. Default: '#FFFFFF' | data-background="#EEEEEE" | $().jqSignature({background: '#EEEEEE'}); |
| Line Color | The color of the signature (as hex). Default: '#222222' | data-line-color="#ABCDEF" | $().jqSignature({lineColor: '#ABCDEF'}); |
| Line Width | The width of the signature line (in pixels). Default: 1 | data-line-width="2" | $().jqSignature({lineWidth: 2}); |
| Auto Fit | Make the canvas fill the width of its parent element. Default: false | data-auto-fit="true" | $().jqSignature({autoFit: true}); |
$().jqSignature('clearCanvas'); - Clears the signature canvas.$().jqSignature('getDataURL'); - Get the contents of the signature canvas as a base64 data URL.jq.signature.changed - Fired when the signature changes (on mouseup/touchend)Sign Below:
Your signature will appear here when you click "Save Signature"