Repository files navigation

Signature Pad is a JavaScript library for drawing smooth signatures. It's HTML5 canvas based and uses variable width Bézier curve interpolation based onSmoother Signatures post bySquare.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 itssource code for some tips on how to handle window resize and high DPI screens. You can also find more about the latter inHTML5 Rocks tutorial.

• Erase feature:https://jsfiddle.net/UziTech/xa91e4Lp/
• Undo feature:https://jsfiddle.net/szimek/osenxvjc/

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<script> tag:

<scriptsrc="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>

You can select a different version athttps://www.jsdelivr.com/package/npm/signature_pad.

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

constcanvas=document.querySelector("canvas");constsignaturePad=newSignaturePad(canvas);// Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)signaturePad.toDataURL();// save image as PNGsignaturePad.toDataURL("image/jpeg");// save image as JPEGsignaturePad.toDataURL("image/jpeg",0.5);// save image as JPEG with 0.5 image qualitysignaturePad.toDataURL("image/svg+xml");// save image as SVG data url// Return svg string without converting to base64signaturePad.toSVG();// "<svg...</svg>"signaturePad.toSVG({includeBackgroundColor:true});// add background color to svg output// Draws signature image from data URL (mostly uses https://mdn.io/drawImage under-the-hood)// 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...");// Draws signature image from data URL and alters it with the given optionssignaturePad.fromDataURL("data:image/png;base64,iVBORw0K...",{ratio:1,width:400,height:200,xOffset:100,yOffset:50});// Returns signature image as an array of point groupsconstdata=signaturePad.toData();// Draws signature image from an array of point groupssignaturePad.fromData(data);// Draws signature image from an array of point groups, without clearing your existing image (clear defaults to true if not provided)signaturePad.fromData(data,{clear:false});// Clears the canvassignaturePad.clear();// Returns true if canvas is empty, otherwise returns falsesignaturePad.isEmpty();// Unbinds all event handlerssignaturePad.off();// Rebinds all event handlerssignaturePad.on();

dotSize

(float or function) Radius of a single dot. Also the width of the start of a mark.

minWidth

(float) Minimum width of a line. Defaults to0.5.

maxWidth

(float) Maximum width of a line. Defaults to2.5.

throttle

(integer) Draw the next point at most once per everyx milliseconds. Set it to0 to turn off throttling. Defaults to16.

minDistance

(integer) Add the next point only if the previous one is farther thanx pixels. Defaults to5.

backgroundColor

(string) Color used to clear the background. Can be any color format accepted bycontext.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.

penColor

(string) Color used to draw the lines. Can be any color format accepted bycontext.fillStyle. Defaults to"black".

velocityFilterWeight

(float) Weight used to modify new velocity based on the previous velocity. Defaults to0.7.

canvasContextOptions

(CanvasRenderingContext2DSettings) part of the Canvas API, provides the 2D rendering context for the drawing surface of acanvas element. It is used for drawing shapes, text, images, and other objects (MDN).

You can set options during initialization:

constsignaturePad=newSignaturePad(canvas,{minWidth:5,maxWidth:10,penColor:"rgb(66, 133, 244)"});

or during runtime:

constsignaturePad=newSignaturePad(canvas);signaturePad.minWidth=5;signaturePad.maxWidth=10;signaturePad.penColor="rgb(66, 133, 244)";

beginStroke

Triggered before stroke begins.
Can be canceled withevent.preventDefault()

endStroke

Triggered after stroke ends.

beforeUpdateStroke

Triggered before stroke update.

afterUpdateStroke

Triggered after stroke update.

You can add listeners to events with.addEventListener:

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

To correctly handle canvas on low and high DPI screens one has to takedevicePixelRatio into account and scale the canvas accordingly. This scaling is also necessary to properly display signatures loaded viaSignaturePad#fromDataURL. Here's an example how it can be done:

functionresizeCanvas(){constratio=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 ofresize event you can listen to screen orientation change, if you're using this library only on mobile devices. You can also throttle theresize event - you can find some examples onthis 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 callsignaturePad.fromData(signaturePad.toData()) to reset the drawing, orsignaturePad.clear() to make sure thatsignaturePad.isEmpty() 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 canlock screen orientation, or read an image from the canvas before resizing it and write the image back after.

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

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:

<imgsrc="data:image/png;base64,iVBORw0K..."/>

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 alsohas 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)File.open("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:

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

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 itstrim option: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 orhere and there's also a tiny librarytrim-canvas that provides this functionality.

Demo:https://jsfiddle.net/szimek/d6a78gwq/

Released under theMIT License.