Smooth Signature Drawing On Canvas – Signature Pad

Category: Javascript , Recommended | January 5, 2021
Author: szimek
Views Total: 1,104 views
Official Page: Go to website
Last Update: January 5, 2021
License: MIT


Smooth Signature Drawing On Canvas – Signature Pad


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


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

// JPG

// SVG

Draw a signature image from a data URL.


More API methods.

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

// draws a signature image from an array of point groups

// clears the signature

// returns true if canvas is empty

// binds/unbinds event handlers

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'

Callback functions.

var signaturePad = new SignaturePad(canvas, {

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



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


Leave a Reply