Skip to content
Get packs

Signature Pad

A small JavaScript library that lets web pages capture smooth hand-drawn signatures on a canvas.

GitHub Download v5.1.4
Stars
12.1k
Forks
2.2k
Licence
MIT
Language
TypeScript
Last update
8 days ago
Type
Library

What it is

Signature Pad is a JavaScript library that adds a drawing area to a web page where people can sign with a mouse, finger, or stylus. It uses HTML5 canvas and smooths strokes with variable-width Bézier curves. The README says it has no external dependencies and works in modern desktop and mobile browsers. Developers use it to collect signatures and export them as images, SVG, or raw point data.

  • Add a signature pad to a checkout, consent, or contract form and export the result with toDataURL()
  • Save a signature as an SVG string with toSVG() for printing or archiving
  • Store signature strokes with toData() and reload them later with fromData()
  • Build undo or erase features using the examples linked in the README

Great for

  • Web developers adding a signature field to a form or app
  • Teams that want signatures captured in the browser without a plugin
  • Projects that need to save signatures as PNG, JPEG, or SVG
  • Developers who want to store signatures as point data and redraw them later

Not ideal for

  • Non-developers looking for a ready-made app; it is a code library with no interface beyond a canvas
  • Projects needing legally certified e-signatures; the README covers drawing and export only and says nothing about legal validity or identity verification
Step-by-step guide: how to use Signature PadInstall, first run, examples, tips and FAQs
Fabric.js vs Signature Pad

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js or Yarn (only if installing via npm or yarn)

    Install with npm

    npm install --save signature_pad

    Install with Yarn

    yarn add signature_pad
  2. 2

    Run it

    • Add a canvas element to your HTML page.
    • Create a SignaturePad instance by passing the canvas: new SignaturePad(canvas).
    • Apply the high-DPI resize snippet from the README so the drawing is sharp on all screens.
    • Call signaturePad.toDataURL() to get the signature as an image when the user is done.
  3. 3

    Get the most out of it

    • Set penColor, minWidth, maxWidth, and backgroundColor during initialization to match your design
    • Use backgroundColor with an opaque color if you plan to save signatures as JPEG
    • Save signatures with toData() when you need to redraw or edit them later
    • Use the beginStroke, endStroke, and afterUpdateStroke events to react to user input
    • Use the README's high-DPI and resize handling examples for crisp output on phones and tablets

Downloads

Source code (.zip)master branch · straight from GitHubRelease v5.1.4Release notes and sourceOfficial website & docsszimek.github.io/signature_pad/

Strengths

  • Small, dependency-free library that works in modern desktop and mobile browsers
  • Flexible export options: PNG, JPEG, SVG, and raw point data
  • Well-established project with many stars, an npm package, and a test badge in the README

Trade-offs

  • Canvas contents are cleared when the canvas is resized, so developers must handle resizing carefully (the README describes workarounds)
  • Storing signatures as data URLs has performance drawbacks on mobile, per the README; developers must design storage themselves
  • The README is truncated, so details beyond the basics are not fully verified here

How it compares

ProjectStarsTypeLevelUpdatedBest for
signature_pad (this)12.1kLibraryintermediate8 days agoWeb developers adding a signature field to a form or app
fabric.js31.5kLibraryintermediate4 days agoWeb developers building interactive canvas editors or drawing tools
excalidraw135kAppbeginner5 days agoTeams sketching diagrams or wireframes together in a shared canvas
anime74.2kLibrarybeginner3 months agoFront-end developers adding motion to websites or web apps
Chart.js67.8kLibraryintermediate14 days agoWeb developers adding standard charts such as line or bar charts to a site
rough21.3kLibraryintermediate2.3 years agoWeb developers who want a casual, hand-drawn look for diagrams or illustrations

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.