Signature Pad

Signature Pad is a JavaScript library for drawing smooth signatures. It's HTML5 canvas based and uses variable width Bézier curve interpolation based on Smoother Signatures post by Square. It works in all modern desktop and mobile browsers and doesn't depend on any external libraries.

Demo

Demo works in desktop and mobile browsers. You can check out its source code for some tips on how to handle window resize and high DPI screens. You can also find more about the latter in HTML5 Rocks tutorial.

Installation

You can install the latest release using Bower - bower install signature_pad.

You can also download the latest release from GitHub releases page or go to the latest release tag (e.g. v1.2.4) and download signature_pad.js or signature_pad.min.js files directly.

The master branch can contain undocumented or backward compatiblity breaking changes.

Usage

API

var canvas = document.querySelector("canvas");

var signaturePad = new SignaturePad(canvas);

// Returns signature image as data URL
signaturePad.toDataURL();

// Draws signature image from data URL
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");

// Clears the canvas
signaturePad.clear();

// Returns true if canvas is empty, otherwise returns false
signaturePad.isEmpty();

Options

dotSize: (float or function) Radius of a single dot.
minWidth: (float) Minimum width of a line. Defaults to 0.5.
maxWidth: (float) Maximum width of a line. Defaults to 2.5.
backgroundColor: (string) Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images.
penColor: (string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".
velocityFilterWeight: (float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
onBegin: (function) Callback when stroke begin.
onEnd: (function) Callback when stroke end.

You can set options during initialization:

var signaturePad = new SignaturePad(canvas, {
    minWidth: 5,
    maxWidth: 10,
    penColor: "rgb(66, 133, 244)"
});

or during runtime:

var signaturePad = new SignaturePad(canvas);
signaturePad.minWidth = 5;
signaturePad.maxWidth = 10;
signaturePad.penColor = "rgb(66, 133, 244)";

Handling data URI encoded images on the server side

If you are not familiar with data URI scheme, you can read more about it on Wikipedia.

There are 2 ways you can handle data URI encoded images.

You could simply store it in your database as a string and display it in HTML like this:

<img src="data:image/png;base64,iVBORw0K..." />

but this way has many disadvantages - it's not easy to get image dimensions, you can't manipulate it e.g. to create a thumbnail and it also has some performance issues on mobile devices.

Thus, more common way is to decode it and store as a file. Here's an example in Ruby:

require "base64"

data_uri = "data:image/png;base64,iVBORw0K..."
encoded_image = data_uri.split(",")[1]
decoded_image = Base64.decode64(encoded_image)
File.open("signature.png", "wb") { |f| f.write(decoded_image) }

Changelog

1.3.2

Fix onBegin and onEnd callbacks when passed as options to constructor. yinsee

1.3.1

Fix handling touch events on mobile IE. tocsoft

1.3.0

Add onBegin and onEnd callbacks. rogerz

1.2.4

Fix bug where stroke becomes very thin. mvirkkunen

1.2.3

Fix SignaturePad#fromDataURL on Firefox. Fr3nzzy

1.2.2

Make SignaturePad#isEmpty return false after loading an image using SignaturePad#fromDataURL. krisivanov

1.2.1

Fixed SignaturePad#clear().

1.2.0

Add backgroundColor option to set custom color of the background on SignaturePad#clear().
Rename color option to penColor.
Fix passing arguments to canvas element on SignaturePad#toDataURL().

License

Released under the MIT License.

animaonline/signature_pad