Seamless HTML5 Canvas-based Signature Drawing Pad Library

Signature Pad is a JavaScript library for drawing seamless signatures. It is based on HTML5 canvas and uses variable-width Bézier curve interpolation based on Smoother Signatures post by Square. It works in all desktop and mobile browsers and does not depend on any external libraries.

signature style, signature generator, online signature draw, create signature, signature design, handwritten signature generator, signature online, digital signature

How to make use of it:

1. Install and download Signature Pad.

# Yarn
$ yarn add signature_pad

# NPM
$ npm install signature_pad --save

2. Import the UMD version of the Signature Pad library into the document.

<script src="dist/signature_pad.umd.js"></script>

3. Create a canvas element for the signature panel.

<canvas></canvas>

4. Configure the Signature pad and select the Signature pad background.

var canvas = document.querySelector("canvas");
var signaturePad = new SignaturePad(canvas, {
    backgroundColor: 'rgb(255, 255, 255)'
});

5. Save the signature as PNG/JPG/SVG images.

// PNG
signaturePad.toDataURL(); 

// JPG
signaturePad.toDataURL("image/jpeg");

// SVG
signaturePad.toDataURL("image/svg+xml");

6. Draw a signature image from the data URL.

signaturePad.fromDataURL("data:image/png;base64,...");

7. More API methods.

// returns an array of point groups
const data = signaturePad.toData();

// draws a signature image from an array of point groups
// with or without clearing your existing image
signaturePad.fromData(data, { clear: false });

// clears the signature
signaturePad.clear();

// returns true if canvas is empty
signaturePad.isEmpty();

// binds/unbinds event handlers
signaturePad.on();
signaturePad.off();

8. Full options to customize the signature panel.

var signaturePad = new SignaturePad(canvas, {

    // min/max line width 
    minWidth: 0.5,
    maxWidth:  2.5,

    // weight used to modify new velocity based on the previous velocity
    velocityFilterWeight: 0.7,

    // draw the next point at most once per every x milliseconds
    throttle: 16,

    // background color
    backgroundColor: 'rgba(0,0,0,0)',

    // min distance
    minDistance: 5,

    // dot size
    dotSize: 2,

    // line color
    penColor: 'black'
    
});

9. Event handlers.

const signaturePad = new SignaturePad(canvas);

signaturePad.addEventListener("beginStroke", () => {
  // do something
}, { once: true });

signaturePad.addEventListener("endStroke", () => {
  // do something
});

signaturePad.addEventListener("beforeUpdateStroke", () => {
  // do something
});

signaturePad.addEventListener("afterUpdateStroke", () => {
  // do something
});

Smooth Signature Drawing On Canvas, Signature Pad Plugin/Github, online signature capture pad