by szimek

szimek /signature_pad

HTML5 canvas based smooth signature drawing

6.3K Stars 1.5K Forks Last release: about 2 years ago (v3.0.0-beta.3) MIT License 223 Commits 28 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Signature Pad npm Build Status Code Climate

Signature Pad is a JavaScript library for drawing smooth signatures. It's HTML5 canvas based and uses variable width Bézier curve interpolation based on Smoother Signatures post by Square. It works in all modern desktop and mobile browsers and doesn't depend on any external libraries.



Demo works in desktop and mobile browsers. You can check out its source code for some tips on how to handle window resize and high DPI screens. You can also find more about the latter in HTML5 Rocks tutorial.

Other demos


You can install the latest release using npm:

npm install --save signature_pad
or Yarn:
yarn add signature_pad

You can also add it directly to your page using


You can select a different version at

This library is provided as UMD (Universal Module Definition) and ES6 module.



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

var signaturePad = new SignaturePad(canvas);

// Returns signature image as data URL (see for the list of possible parameters) signaturePad.toDataURL(); // save image as PNG signaturePad.toDataURL("image/jpeg"); // save image as JPEG signaturePad.toDataURL("image/svg+xml"); // save image as SVG

// Draws signature image from data URL. // NOTE: This method does not populate internal data structure that represents drawn signature. Thus, after using #fromDataURL, #toData won't work properly. signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");

// Returns signature image as an array of point groups const data = signaturePad.toData();

// Draws signature image from an array of point groups signaturePad.fromData(data);

// Clears the canvas signaturePad.clear();

// Returns true if canvas is empty, otherwise returns false signaturePad.isEmpty();

// Unbinds all event handlers;

// Rebinds all event handlers signaturePad.on();


(float or function) Radius of a single dot.
(float) Minimum width of a line. Defaults to 0.5.
(float) Maximum width of a line. Defaults to 2.5.
(integer) Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
(integer) Add the next point only if the previous one is farther than x pixels. Defaults to 5.
(string) Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images.
(string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".
(float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
(function) Callback when stroke begin.
(function) Callback when stroke end.

You can set options during initialization:

var signaturePad = new SignaturePad(canvas, {
    minWidth: 5,
    maxWidth: 10,
    penColor: "rgb(66, 133, 244)"
or during runtime:
var signaturePad = new SignaturePad(canvas);
signaturePad.minWidth = 5;
signaturePad.maxWidth = 10;
signaturePad.penColor = "rgb(66, 133, 244)";

Tips and tricks

Handling high DPI screens

To correctly handle canvas on low and high DPI screens one has to take

into account and scale the canvas accordingly. This scaling is also necessary to properly display signatures loaded via
. Here's an example how it can be done: ```javascript function resizeCanvas() { var 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(); ``

Instead of
event you can listen to screen orientation change, if you're using this library only on mobile devices. You can also throttle the
resize` event - you can find some examples on this MDN page.

When you modify width or height of a canvas, it will be automatically cleared by the browser. SignaturePad doesn't know about it by itself, so you can call

to make sure that
returns correct value in this case.

This clearing of the canvas by the browser can be annoying, especially on mobile devices e.g. when screen orientation is changed. There are a few workarounds though, e.g. you can lock screen orientation, or read an image from the canvas before resizing it and write the image back after.

Handling data URI encoded images on the server side

If you are not familiar with data URI scheme, you can read more about it on Wikipedia.

There are 2 ways you can handle data URI encoded images.

You could simply store it in your database as a string and display it in HTML like this:

but this way has many disadvantages - it's not easy to get image dimensions, you can't manipulate it e.g. to create a thumbnail and it also has some performance issues on mobile devices.

Thus, more common way is to decode it and store as a file. Here's an example in Ruby:

require "base64"

data_uri = "data:image/png;base64,iVBORw0K..." encoded_image = data_uri.split(",")[1] decoded_image = Base64.decode64(encoded_image)"signature.png", "wb") { |f| f.write(decoded_image) }

Here's an example in PHP:

$data_uri = "data:image/png;base64,iVBORw0K...";
$encoded_image = explode(",", $data_uri)[1];
$decoded_image = base64_decode($encoded_image);
file_put_contents("signature.png", $decoded_image);

Here's an example in C# for ASP.NET:

var dataUri = "data:image/png;base64,iVBORw0K...";
var encodedImage = dataUri.Split(",")[1];            
var decodedImage = Convert.FromBase64String(encodedImage);
System.IO.File.WriteAllBytes("signature.png", decodedImage);

Removing empty space around a signature

If you'd like to remove (trim) empty space around a signature, you can do it on the server side or the client side. On the server side you can use e.g. ImageMagic and its

convert -trim input.jpg output.jpg
. If you don't have access to the server, or just want to trim the image before submitting it to the server, you can do it on the client side as well. There are a few examples how to do it, e.g. here or here and there's also a tiny library trim-canvas that provides this functionality.

Drawing over an image



Released under the MIT License.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.