PHPackages                             liquidedge-app/signature\_pad - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. liquidedge-app/signature\_pad

ActiveLibrary[Utility & Helpers](/categories/utility)

liquidedge-app/signature\_pad
=============================

1.0.3(1y ago)0221TypeScript

Since May 19Pushed 1y agoCompare

[ Source](https://github.com/ryno-liquidedge/signature_pad)[ Packagist](https://packagist.org/packages/liquidedge-app/signature_pad)[ RSS](/packages/liquidedge-app-signature-pad/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (2)DependenciesVersions (3)Used By (0)

Signature Pad [![npm](https://camo.githubusercontent.com/d62e138cb2d9ec70a5bd3081c77f8b492db1e2184ed611ced1062e1361991c4c/68747470733a2f2f62616467652e667572792e696f2f6a732f7369676e61747572655f7061642e737667)](https://www.npmjs.com/package/signature_pad) [![tests](https://github.com/szimek/signature_pad/actions/workflows/test.yml/badge.svg)](https://github.com/szimek/signature_pad/actions/workflows/test.yml) [![Code Climate](https://camo.githubusercontent.com/f6570e9d505549f5dba8d13d589a2338cba1e09d138f3a32b4b3b53a0c89ddad/68747470733a2f2f636f6465636c696d6174652e636f6d2f6769746875622f737a696d656b2f7369676e61747572655f7061642e706e67)](https://codeclimate.com/github/szimek/signature_pad) [![](https://camo.githubusercontent.com/efa6596753373d5f49e0ac07ac421d115d0d9a177254647e6e0e57a3230a7154/68747470733a2f2f646174612e6a7364656c6976722e636f6d2f76312f7061636b6167652f6e706d2f7369676e61747572655f7061642f62616467653f7374796c653d726f756e646564)](https://www.jsdelivr.com/package/npm/signature_pad)
=========================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================

[](#signature-pad----)

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](https://developer.squareup.com/blog/smoother-signatures/) post by [Square](https://squareup.com). It works in all modern desktop and mobile browsers and doesn't depend on any external libraries.

[![Example](https://camo.githubusercontent.com/735a0a4e23fbae48c85c13cf7a76075358dc77cf95d6a2cf1b2c051b85056339/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f393837332f3236383034362f39636564333435342d386566632d313165322d383136652d6139623137306135313030342e706e67)](https://camo.githubusercontent.com/735a0a4e23fbae48c85c13cf7a76075358dc77cf95d6a2cf1b2c051b85056339/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f393837332f3236383034362f39636564333435342d386566632d313165322d383136652d6139623137306135313030342e706e67)

Demo
----

[](#demo)

[Demo](http://szimek.github.io/signature_pad) works in desktop and mobile browsers. You can check out its [source code](https://github.com/szimek/signature_pad/blob/master/docs/js/app.js) 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](http://www.html5rocks.com/en/tutorials/canvas/hidpi).

### Other demos

[](#other-demos)

- Erase feature:
- Undo feature:

Installation
------------

[](#installation)

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

```

```

You can select a different version at [https://www.jsdelivr.com/package/npm/signature\_pad](https://www.jsdelivr.com/package/npm/signature_pad).

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

Usage
-----

[](#usage)

### API

[](#api)

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

const signaturePad = new SignaturePad(canvas);

// Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)
signaturePad.toDataURL(); // save image as PNG
signaturePad.toDataURL("image/jpeg"); // save image as JPEG
signaturePad.toDataURL("image/jpeg", 0.5); // save image as JPEG with 0.5 image quality
signaturePad.toDataURL("image/svg+xml"); // save image as SVG data url

// Return svg string without converting to base64
signaturePad.toSVG(); // "