# 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:

- Development, uncompressed: jq-signature.js
- Production, compressed: jq-signature.min.js

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.

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});`

### 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"

View on GitHub