OSS Tanbou
View on GitHubProject website

draw smooth signatures on HTML5 canvas and export PNG, JPEG, SVG, or point data

OSS scale score 260.5OSS health 79Update pace 9 commits/30d
About these scores

OSS scale score is an unbounded metric that log-compresses and weights Stars, Watchers, Forks, and Contributors. Discovery score is the current OSS scale score minus the score at discovery. Update pace is commits in the last 30 days, growth momentum is the OSS scale score difference within the recent observation window, and OSS health is a 0–100 rating based on available recency, Community Health, and release data.

Stars
12,047
Primary language
TypeScript
License
MIT
Repository last updated
Sep 30, 2026
On this page

Overview

Signature Pad is a JavaScript library for smooth handwritten signature input on HTML5 canvas. It uses variable-width Bézier curve interpolation and can expose the result as images, SVG, or point-group data.

Features and best fit

Based on official documentation; not hands-on tested · Content checked:

Key features

Draw smooth handwritten strokes on canvas

Mouse and touch input are rendered as variable-width Bézier curves, providing smooth signature drawing across modern desktop and mobile browsers.

Sources: [2]

Export PNG, JPEG, SVG, or point-group data

toDataURL exports image data URLs, toSVG returns SVG text, and toData preserves point groups that can later be restored with fromData.

Sources: [2]

Best fit

Fits handwritten-input surfaces inside web forms and applications

It is useful for adding canvas-based signature or handwriting capture to forms, confirmation screens, kiosks, and touch-oriented web interfaces.

Sources: [2]

Before adoption

Handle high-DPI scaling and canvas resize in the application

High-DPI screens require scaling the canvas by devicePixelRatio. Changing canvas width or height clears it, so resize flows need redraw or data preservation.

Sources: [2]

Image restoration does not restore internal point data

fromDataURL redraws an image but does not repopulate the internal point representation, so subsequent toData calls do not behave like a point-data round trip.

Sources: [2]

Official sources

  1. [1]szimek/signature_pad repository(2026-09-30)
  2. [2]Signature Pad README(2026-09-30)
  3. [3]Signature Pad MIT license(2026-09-30)
Supplemental curator note

It is a focused drawing component rather than a complete signing workflow. Applications still need to handle high-DPI canvas sizing, resize persistence, identity, and business-process requirements.

Try it in 3 steps

  1. 1

    Install Signature Pad

    Add the library to an existing web project using the npm command documented in the README.

    npm install --save signature_pad
  2. 2

    Attach Signature Pad to a canvas

    After importing SignaturePad from signature_pad, initialize it with the target canvas element.

    const canvas = document.querySelector("canvas"); const signaturePad = new SignaturePad(canvas);
  3. 3

    Export the signature as an image

    Capture a PNG data URL. Use toSVG for SVG text or toData when point-group data is needed for later editing or redraw.

    const pngDataUrl = signaturePad.toDataURL();
Check the official README

Growth

Growth trends · Last 30 days

12,047 Stars

Trend data is still being collected.

Development activity

Last 90 days · weekly

Commits (last 30 days)
9
Open PRs
1

Development activity is still being collected.

Built with

Categories and tags

Categories

Tags

GitHub data

GitHub dataView detailed GitHub data
View on GitHub

GitHub Topics

  • signature
  • signature-pad
  • canvas
  • javascript
  • drawing
Stars
12,047
Forks
2,171
Watchers
213
Open issues
4
Contributors
57
Owner type
User
Primary language
TypeScript
License
MIT
Repository last updated
Sep 30, 2026
Write a related article

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Report incorrect information

Tell us if any listing information is incorrect or outdated.

After reading this page, do you know what to do next?