Smooth Signature Drawing On Canvas – Signature Pad

Preview:

Description:

A Vanilla JavaScript-powered signature pad that allows the users to draw smooth signatures on an HTML canvas element and export the signatures to PNG/JPG/SVG images.

Works perfectly on mobile and desktop devices.

Basic usage:

Install & download the Signature Pad.

# Yarn
$ yarn add signature_pad
# NPM
$ npm install signature_pad --save

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

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

Create a canvas element for the signature pad.

<canvas></canvas>

Initialize the signature pad and define a background for the signature pad. It’s Necessary to use an opaque color when saving image as JPEG. This option can be omitted if only saving as PNG or SVG.

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

Save the signature as PNG/JPG/SVG images.

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

Draw a signature image from a data URL.

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

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 });
// Return svg string without converting to base64
signaturePad.toSVG(); // "<svg...</svg>"
signaturePad.toSVG({includeBackgroundColor: true}); // add background color to svg output
// clears the signature
signaturePad.clear();
// returns true if canvas is empty
signaturePad.isEmpty();
// binds/unbinds event handlers
signaturePad.on();
signaturePad.off();

Full options to customize the signature pad.

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'
    
});

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
});

Changelog:

v4.1.6 (07/16/2023)

• bugfix

v4.1.5 (02/21/2023)

• bugfix

v4.1.4 (11/08/2022)

• undo fix zoom

v4.1.3 (10/31/2022)

• Bugfix

v4.1.0 (10/30/2022)

• add toSVG method

v4.0.10 (10/12/2022)

• bugfixes

v4.0.9 (09/24/2022)

• add velocityFilterWeight to point group options
• use point group options in calculations

v4.0.8 (09/13/2022)

• fix svg image size

v4.0.7 (07/22/2022)

• bugfix

v4.0.6 (07/18/2022)

• check for event.cancelable in touch events

v4.0.5 (06/06/2022)

• Bugfixes

v4.0.4 (04/04/2022)

• Fixed clone data in fromData

v4.0.3 (03/18/2022)

• Bug Fixes

v4.0.2 (01/22/2022)

• Bugfix: set user-select none on canvas

v4.0.1 (01/08/2022)

• fix iOS <= 1

v4.0.0 (11/24/2021)

• Bug fixes
• Allow offsets when loading image via fromDataURL
• Add clear option to fromData
• Capture pressure when signing
• SignaturePad is an event emitter. onBegin and onEnd options have been moved to events.

v3.0.0 beta 4 (01/05/2021)

• Rewrite library using TypeScript. TypeScript declaration files are now provided by the library.