szimek/signature_pad

★ 11,927TypeScriptAudience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((Signature Pad))
    What it does
      Signature capture
      Canvas drawing
      Smooth line rendering
    Export Formats
      PNG
      JPEG
      SVG
      Raw stroke data
    Features
      Touch support
      Pen width variation
      Resize handling
    Setup
      npm or CDN
      No dependencies

mindmap root((Signature Pad)) What it does Signature capture Canvas drawing Smooth line rendering Export Formats PNG JPEG SVG Raw stroke data Features Touch support Pen width variation Resize handling Setup npm or CDN No dependencies

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a signature capture field to a web form so users can sign documents digitally in the browser on desktop or mobile.

USE CASE 2

Export a drawn signature as a PNG or SVG image to attach to a PDF or store in a database.

USE CASE 3

Reload a previously saved signature from stored data and redisplay it in the canvas so users can review what they signed.

Tech stack

TypeScriptJavaScriptHTML Canvas

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

Signature Pad is a JavaScript library that lets you add a handwriting or signature input area to a web page. Users draw on an HTML canvas element with their mouse or finger, and the library captures the strokes and renders them as a smooth line. The smoothing technique comes from research Square published on making digital signatures look natural rather than jagged. The library works in all modern browsers on desktop and mobile without requiring any other libraries. Once a user has drawn their signature, you can export it as a PNG, JPEG, or SVG file, or retrieve the raw stroke data as a series of points if you want to re-draw or process it later. You can also load a previously saved signature back into the canvas from any of those formats. Customization options let you control things like the pen color, background color, and how the line width changes with drawing speed (strokes drawn faster appear thinner, which mimics how real ink behaves). You can also listen for events like when a stroke begins or ends, which is useful if you want to show a save button only after the user has actually drawn something. A few practical considerations come with using canvas-based drawing. On screens with high pixel density (like Retina displays), the canvas needs to be scaled explicitly to avoid blurry output. The README includes code showing how to handle this. Canvas elements also clear automatically when resized by the browser, so the library exposes a redraw method to restore the signature after a resize event. Installation is available via npm or Yarn, or by loading a script tag directly from a CDN. The package ships as both a universal module and an ES6 module, so it fits into most existing JavaScript build setups.

Copy-paste prompts

Prompt 1

Add a Signature Pad to my HTML form so users can draw their signature and I can export it as a PNG when they click a Save button, show the full HTML and JavaScript code.

Prompt 2

Configure Signature Pad so the pen color is dark blue, the line width varies with drawing speed, and a Save button only appears after the user has actually drawn something.

Prompt 3

My Signature Pad looks blurry on Retina screens. Show me the JavaScript code to scale the canvas correctly for high-DPI displays.

Prompt 4

After the browser window is resized, my Signature Pad clears itself. How do I use the redraw method to restore the signature automatically after a resize event?

Prompt 5

I want to save a user's signature to my database and reload it later. Show me how to export the raw stroke data as JSON and then restore it to the canvas.

Open on GitHub → Explain another repo

← szimek on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.