Smooth Signature Drawing On Canvas – Signature Pad

Category: Javascript , Recommended | November 24, 2021
Author:szimek
Views Total:112 views
Official Page:Go to website
Last Update:November 24, 2021
License:MIT

Preview:

Smooth Signature Drawing On Canvas – Signature Pad

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

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

You Might Be Interested In:


One thought on “Smooth Signature Drawing On Canvas – Signature Pad

  1. leo

    How do you upload the signature to the server instead of downloading it

    Reply

Leave a Reply