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
signaturePad.fromDataURL("data:image/png;base64,iVBORw...");

// Clears the canvas
signaturePad.clear();

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

// Unbinds all event handlers
signaturePad.off();

// Rebinds all event handlers
signaturePad.on();

License: MIT.

Demo:

http://szimek.github.io/signature_pad

GitHub:

https://github.com/szimek/signature_pad

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

https://github.com/legalthings/angular-signature

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:

https://github.com/thomasjbradley/signature-pad

See also:

JavaScript, HTML5, CSS and Data URI

Like it? Sign it!

Share:Share on Facebook1Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1