JavaScript signature pad solutions

The libraries and jQuery plugins, that takes an advantage of JS and HTML5 canvas element, to create a flexible JavaScript signature pad solutions in web apps.

JavaScript signature pad in action

Interesting feature of some of such solutions is ability to record the drawn signature in JSON, for later regeneration.

We’d like to present 2 of such solutions.

1. 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.

Code example:

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

var signaturePad = new SignaturePad(canvas);

// Returns signature image as data URL
signaturePad.toDataURL(); // save image as PNG
signaturePad.toDataURL("image/jpeg"); // save image as JPEG

// Draws signature image from data URL

// Clears the canvas

// Returns true if canvas is empty, otherwise returns false

// Unbinds all event handlers;

// Rebinds all event handlers

License: MIT.



There is another solution, that implements this script as AngularJS directive:

2. jquery.signaturepad.js

Another JavaScript signature pad is made as a jQuery plugin, which assisting in the creation of an HTML5 canvas based signature pad. Records the drawn signature in JSON for later regeneration.

JavaScript signature example
JavaScript signature example

Highly configurable.

Dependencies: FlashCanvas, json2.js, jQuery 1.3.2+

License: New BSD license.

Details, many demos and download @ GitHub page:

See also:

JavaScript, HTML5, CSS and Data URI

Like it? Sign it!