Guide · Open source

How to use signature_pad: draw, save and redraw signatures

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

signature_pad is an open-source JavaScript library that adds a drawing area to a web page so people can sign with a mouse, finger or stylus. This guide shows web developers how to install it, create a signature pad on a canvas, tune its appearance, and export the result as an image, SVG or raw point data. It does not cover legal validity of signatures, which the library does not address.

Signature Padszimek/signature_pad · ★ 12.1k · MIT Install options & downloads

Quick start

1Install the package. Run npm install --save signature_pad or yarn add signature_pad in your project. Alternatively, load the UMD build with a script tag.
2Add a canvas. Place a canvas element in your form where the signature should go.
3Create the pad. Select the canvas with querySelector and pass it to new SignaturePad(canvas).
4Set options. Pass options such as penColor, minWidth and maxWidth, or assign them to the instance later.
5Handle resizing. Scale the canvas for devicePixelRatio and call clear or redraw after resizes.
6Export the signature. Call toDataURL for PNG or JPEG, toSVG for SVG, or toData to store point data.

Install signature_pad with npm, Yarn or a script tag

Signature Pad is distributed as a package. If you use npm or Yarn, you need Node.js or Yarn installed. Run one of the commands below in your project folder.

You can also load the library directly in a page with a script tag. Replace the version placeholder with the version you want to use, as the README instructs. The library is provided as UMD and as an ES6 module.

npm: install the package and save it as a dependency
Yarn: add the package to your project
Script tag: load the UMD build from the jsDelivr CDN

npm install --save signature_pad

Create a signature pad on a canvas element

Signature Pad draws onto an HTML canvas element. Select the canvas, then pass it to the SignaturePad constructor. Once that is done, people can draw on the canvas with a mouse, finger or stylus.

Options can be passed as a second argument when you create the pad, or set later on the instance.

const canvas = document.querySelector("canvas");

const signaturePad = new SignaturePad(canvas);

Set the pen colour, line width and other options

The README lists these options. minWidth defaults to 0.5 and maxWidth defaults to 2.5. penColor defaults to black. backgroundColor defaults to transparent, so set an opaque colour such as rgb(255,255,255) if you plan to save signatures as JPEG. throttle defaults to 16 milliseconds and minDistance defaults to 5 pixels. velocityFilterWeight defaults to 0.7.

You can set options at creation time or change them at runtime by assigning properties to the instance.

dotSize: radius of a single dot, also the width at the start of a mark
minWidth and maxWidth: minimum and maximum line width
penColor: any colour format accepted by context.fillStyle
backgroundColor: colour used to clear the background
throttle: set to 0 to turn throttling off
minDistance: add a point only if the previous one is farther than this many pixels
canvasContextOptions: passed to the 2D canvas context

const signaturePad = new SignaturePad(canvas, {
    minWidth: 5,
    maxWidth: 10,
    penColor: "rgb(66, 133, 244)"
});

Save a signature as PNG, JPEG, SVG or point data

toDataURL returns the signature as a data URL. The default is PNG. You can pass image/jpeg for JPEG, and a quality value between 0 and 1 as a second argument. Passing image/svg+xml returns an SVG data URL.

toSVG returns an SVG string directly, without base64 conversion. toData returns the signature as an array of point groups, which you can store and later pass to fromData to redraw it.

PNG: signaturePad.toDataURL()
JPEG: signaturePad.toDataURL("image/jpeg")
SVG string: signaturePad.toSVG()
Point data: signaturePad.toData()

signaturePad.toDataURL(); // PNG
signaturePad.toDataURL("image/jpeg", 0.5); // JPEG at quality 0.5
signaturePad.toSVG(); // "<svg...</svg>"
const data = signaturePad.toData();
signaturePad.fromData(data);

Clear, check, redraw and handle screen resizing

clear empties the canvas and isEmpty returns true when nothing has been drawn. fromData, with the option clear set to false, draws on top of the existing image instead of replacing it.

Resizing a canvas makes the browser clear it. The README suggests calling redraw to reset the drawing, or clear so that isEmpty returns the correct value. For sharp output on high DPI screens, scale the canvas by devicePixelRatio as in the README example.

signaturePad.clear() empties the canvas
signaturePad.isEmpty() reports whether the pad is blank
signaturePad.redraw() redraws after a canvas resize
signaturePad.off() and signaturePad.on() unbind and rebind event handlers

function resizeCanvas() {
    const ratio =  Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
    signaturePad.clear(); // otherwise isEmpty() might return incorrect value
}

window.addEventListener("resize", resizeCanvas);
resizeCanvas();

Listen for stroke events

The library fires beginStroke, endStroke, beforeUpdateStroke and afterUpdateStroke events. You can attach listeners with addEventListener. A beginStroke listener can cancel the stroke by calling event.preventDefault().

const signaturePad = new SignaturePad(canvas);
signaturePad.addEventListener("beginStroke", () => {
  console.log("Signature started");
}, { once: true });

What people use it for

Adding a signature field to a web form or app
Saving signatures as PNG, JPEG or SVG files on a server
Storing signatures as point data and redrawing them later with fromData
Letting customers sign on a phone or tablet with a finger or stylus

Frequently asked questions

How do I install signature_pad?

Run npm install --save signature_pad with npm, or yarn add signature_pad with Yarn. You can also load the UMD build from a jsDelivr script tag. Npm and Yarn require Node.js or Yarn to be installed.

Is signature_pad free to use?

The repository is licensed under MIT. Check the license file in the repository for the full terms before using it in your project.

How do I save a signature as an image?

Call signaturePad.toDataURL() for a PNG data URL, or pass image/jpeg for JPEG. For a JPEG, set backgroundColor to an opaque colour first, because the default background is transparent.

Can I save a signature as SVG?

Yes. signaturePad.toSVG() returns an SVG string, and toDataURL("image/svg+xml") returns an SVG data URL.

Does signature_pad work on mobile devices?

The README says it works in all modern desktop and mobile browsers and has no external dependencies. It also notes that canvas resizing can clear the drawing, so handle orientation changes.

Are signatures made with signature_pad legally binding?

The README covers drawing and exporting only. It says nothing about legal validity or identity verification, so if you need a legally certified e-signature you will need a different solution.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Signature Pad suits web developers who want to capture handwritten-style signatures in the browser without a plugin, and who want to export them as PNG, JPEG, SVG or point data. It is a code library with no ready-made interface, and it does not handle legal validity or identity checks, so people who need certified e-signatures or a finished app should look at other tools. Comparable projects mentioned in the source include Fabric.js, Konva, perfect-freehand and react-signature-canvas.

Install options & downloads