Signature Pad

• Introduction
• Demos
  • Demo of accepting a signature
  • Demo of requiring a drawn signature
  • Demo of regenerating a signature
• How to Use the Plugin
• Accepting Signatures
  • Javascript
  • HTML Template
    • Further HTML Explanation
  • Form Submission
• Require a Drawn Signature
• Regenerating Signatures
  • Javascript
    • Alternate Javascript
  • HTML Template
• Options
  • Changing Default Options
  • Options Reference
• API
  • API Reference
  • API Limitations
• Version History

Introduction

The Signature Pad jQuery plugin will transform an HTML form into a signature pad. The Signature Pad has two modes: TypeIt and DrawIt. In TypeIt mode the user’s signature is automatically generated as HTML text, styled with @font-face, from the input field where they type their name. In DrawIt mode the user is able to draw their signature on the canvas element.

The drawn signature is written out to a hidden input field as a JSON array using JSON.strinify(). Since the signature is saved as JSON it can be submitted as part of the form and kept on file. Using the JSON array, the signature can then be regenerated into the canvas element for display.

Obviously, Signature Pad has a couple extra dependencies: Douglas Crockford’s JSON2 and Google’s Explorer Canvas. (Both scripts are included in the downloadable package.)

Signature Pad tries to maintain a certain level of progressive enhancement, while still giving developers enough control. There is very little generated HTML. The HTML in the examples has some elements that should be hidden by default (including canvas). Signature Pad will trigger the display of certain items if the browser supports Javascript and canvas.

Signature Pad works with both mouse and touch devices.

Get the source code on GitHub:
http://github.com/thomasjbradley/signature-pad/

Demos

• Demo of accepting a signature

  This demo showcases an HTML form and the Signature Pad ready to accept a new signature.

• Demo of requiring a drawn signature

  This demo showcases an HTML form where the user is required to draw their signature before submission.

• Demo of regenerating a signature

  This demo showcases regeneration of a signature from a stored JSON array.

How to Use the Plugin

First, include all the required Javascript files: jquery.js, jquery.signaturepad.js, excanvas.js and json2.js.

<!--[if gte IE 7]><script type="text/javascript" src="excanvas-r71.min.js"></script><![endif]-->
<!--[if IE 6]><script type="text/javascript" src="excanvas-r3.min.js"></script><![endif]-->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.signaturepad.min.js"></script>
<script type="text/javascript" src="json2.min.js"></script>

(IE 7/8 and IE 6 require different versions of excanvas to function properly.)

And the CSS file: jquery.signaturepad.css.

<link rel="stylesheet" type="text/css" href="jquery.signaturepad.css">

The CSS file contains a generic display for the form and Signature Pad, which you are encouraged to change for your web site’s theme.

After including all the external resources, simply call the jQuery plugin method on the HTML form element:

$('.sigPad').signaturePad(options);

The method accepts an options object for the Signature Pad instance.
Signature Pad options reference

Calling the signaturePad() method also returns an API for the Signature Pad instance.
Signature Pad API Reference

Accepting Signatures

Demo

When accepting a signature, it is best to wrap the Signature Pad in a form so the signature can be submitted to the server for storage.

Javascript

$(document).ready( function(){
  $('.sigPad').signaturePad();
});

That’s really all there is to it! (.sigPad is the class for the form element itself.) Of course there is some corresponding HTML, have a look below for the template.

HTML Template

<form method="post" action="" class="sigPad">
  <label for="name">Print your name</label>
  <input type="text" name="name" id="name" class="name">
  <p class="typeItDesc">Review your signature</p>
  <p class="drawItDesc">Draw your signature</p>
  <ul class="sigNav">
    <li class="typeIt"><a href="#type-it" class="current">Type It</a></li>
    <li class="drawIt"><a href="#draw-it">Draw It</a></li>
    <li class="clearButton"><a href="#clear">Clear</a></li>
  </ul>
  <div class="sig sigWrapper">
    <div class="typed"></div>
    <canvas class="pad" width="198" height="55"></canvas>
    <input type="hidden" name="output" class="output">
  </div>
  <button type="submit">I accept the terms of this agreement.</button>
</form>

This is the HTML used on the accept demo and contains all the bits that Signature Pad looks for. Remember, all of the class names are configurable options.

Further HTML Explanation

Let’s go through it and explain in detail some of the important parts.

<input type="text" name="name" id="name" class="name">

The value of the .name input element is used for creating the automatically generated signature.

<p class="typeItDesc">Review your signature</p>
<p class="drawItDesc">Draw your signature</p>

These two paragraphs, .typeItDesc and .drawItDesc are used as descriptive labels for the canvas Signature Pad. They are hidden or shown depending on whether the user is drawing their signature or using the automatically generated one.

<ul class="sigNav">

The .sigNav ul element is shown if the canvas can be drawn on (aka, canvas.getContext() is available). The list contains the links for switching modes.

<li class="clearButton"><a href="#clear">Clear</a></li>

The .clearButton element is a button/link to allow the user to clear their signature if they mess it up. Displayed only when in DrawIt mode.

<div class="sig sigWrapper">

The .sig and .sigWrapper div is hidden by default and wraps the canvas and generated signature together allowing overlapping positions.

<div class="typed"></div>

The .typed div will have the value typed into the input field inserted into it. This is effectively the automatically generated signature. It can be styled in any fashion, but the samples use @font-face to make the text look semi-handwritten.

<canvas class="pad" width="198" height="55"></canvas>

Obviously the canvas element for allowing the user to draw their signature.

<input type="hidden" name="output" class="output">

The .output hidden input field is where the JSON representation of the signature is stored for submission to a server.

Form Submission

Signature Pad automatically validates the name input field on form submission by checking to see if it is empty. If the field is empty the form isn’t submitted and Signature Pad prepends an error message to the top of the form. Signature Pad assigns an error class to the input and the label and also sets the focus on the name field.

Both the error message and error class are options that can be changed.

Require a Drawn Signature

Demo

The form can be set up to require the user to draw their signature as well as type their name into the field.

This example is almost identical to the above example, but since the user must draw their signature the HTML for typing their signature is not required. So remove the following two lines:

<p class="typeItDesc">Review your signature</p>

and

<li class="typeIt"><a href="#type-it" class="current">Type It</a></li>

Then add the drawOnly option to the Javascript and set it to true. This option disables the typeIt actions and validates that the user has drawn their signature.

$(document).ready( function(){
  $('.sigPad').signaturePad({drawOnly:true});
});

Regenerating Signatures

Demo

Regenerating signatures from a JSON representation is quite simple. Signature Pad accepts the JSON (string or native Javascript array) and simply redraws the signature onto the canvas element.

Javascript

var sig = [{lx:20,ly:34,mx:20,my:34},{lx:21,ly:33,mx:20,my:34},…];

$(document).ready( function(){
  $('.sigPad').signaturePad({displayOnly:true}).regenerate(sig);
});

sig is a variable that contains the JSON representation of the signature. In the above example you can see what the JSON looks like—though it has been trimmed for brevity’s sake.

Also notice that an options variable is passed into the signaturePad() method. The displayOnly property tells Signature Pad not to initialise any of the standard HTML elements, mouse events or click events.
Signature Pad Options Reference

After initialising the canvas, call the regnerate() method and pass it our JSON signature. This method simply redraws the signature onto the canvas element.

Alternative Javascript

var api = $('.sigPad').signaturePad({displayOnly:true});
api.regenerate(sig);

Both snippets do exactly the same thing. The only difference is that in this example the API is stored in a variable and referred to later on.

HTML Template

<div class="sigPad signed">
  <div class="sigWrapper">
    <div class="typed">Sir John A. Macdonald</div>
    <canvas class="pad" width="200" height="55"></canvas>
  </div>
  <p>Sir John A. Macdonald<br>July 1, 1867</p>
</div>

The HTML for displaying a signature is much simpler. The primary component is of course the canvas element. The typed div is still there, for progressive enhancement, and will show the automatically generated signature using HTML and CSS if Javascript and canvas are not available.

Options

Options can be passed into the method when Signature Pad is instantiated. Only options that are different from the defaults need to be included in the options variable.

var options = {bgColour:'#000'};
$('.sigPad').signaturePad(options);

Changing Default Options

The default options can be changed globally for all instances of Signature Pad on the page using the jQuery plugin construct:

$.fn.signaturePad.bgColour = '#000';

Setting default options always follows this pattern:

$.fn.signaturePad.OPTION = VALUE;

API

The API is returned from the instantiation of the Signature Pad and can be stored in a variable or chained.

$('.sigPad').signaturePad({displayOnly:true}).regenerate(sig);

API chaining after instantiation.

var api = $('.sigPad').signaturePad({displayOnly:true});
api.regenerate(sig);

Storage of the API in a variable.

API Limitations

Signature Pad is able to create multiple instances on a single page by selecting multiple items with jQuery. The limitation lies in the API return; Signature Pad will only return the API for the last selected element. If you would like to store the API for multiple elements they must be initialised with separate jQuery calls.

Version History

1.2.1 (Jun. 7, 2010)

• Added namespaces to all event bindings

1.2.0 (May 28, 2010)

• Added support for touch devices (Android, iPad, iPhone, etc).

1.1.3 (May 28, 2010)

• Fixed a bug in the validation if multiple signature pads are used in jquery 1.4.2.

1.1.2 (May 26, 2010)

• Fixed an XSS-like bug, where entering a <script> or an <iframe> element into the name field would cause the code to be executed. < and > are now converted to entities.

1.1.1 (Jan. 26, 2010)

• Fixed a bug in IE 8, where IE 8 would not regenerate signatures. Required a new version of excanvas (r71 from svn trunk). IE6 still requires older release r3 to work.

1.1.0 (Jan. 4, 2010)

• Added option to require and validate a drawn signature
• Added option to default to drawIt mode
• Fixed a bug where pressing validate multiple times would remove name input

1.0.1 (Dec. 3, 2009)

• Fixed @font-face support for Google Chrome by adding SVG fonts
• Fixed future @font-face support by adding WOFF font

1.0.0 (Nov. 30, 2009)

• Initial Release