Smooth Signature Drawing On Canvas – Signature Pad

Category: Javascript , Recommended | August 12, 2019
Author: szimek
Views Total: 46
Official Page: Go to website
Last Update: August 12, 2019
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="js/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 = wrapper.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
signaturePad.fromData(data);

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

    // min distance
    minDistance: 5,

    // dot size
    dotSize: 2,

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

Callback functions.

var signaturePad = new SignaturePad(canvas, {

    onBegin: function(){
      // do something
    }
    
    onEnd: function(){
      // do something
    }

});

You Might Be Interested In:


Leave a Reply