# szimek/signature_pad

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/szimek-signature-pad).**

11,955 stars · 2,170 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/szimek/signature_pad
- Homepage: http://szimek.github.io/signature_pad/
- awesome-repositories: https://awesome-repositories.com/repository/szimek-signature-pad.md

## Topics

`canvas` `drawing` `javascript` `signature` `signature-pad`

## Description

signature_pad is a JavaScript library and drawing tool for capturing handwritten digital signatures on an HTML5 canvas. It provides a handwriting capture interface that transforms raw mouse or touch inputs into smooth, professional-looking lines.

The project uses Bézier curve interpolation to smooth jagged input points into fluid strokes. It supports the configuration of drawing aesthetics, including pen color, background color, and line width, and includes a history management system for undoing and restoring drawing actions.

The library handles the serialization of signature data into point groups and supports exporting captured signatures as SVG, PNG, or JPG image formats. It also provides mechanisms to restore previously captured signatures onto the canvas from saved data points or image URLs.

## Tags

### User Interface & Experience

- [Digital Signature Pads](https://awesome-repositories.com/f/user-interface-experience/digital-signature-pads.md) — Implements a professional digital signature pad using an HTML5 canvas for capturing smooth handwritten signatures.
- [Handwriting Capture Interfaces](https://awesome-repositories.com/f/user-interface-experience/handwriting-capture-interfaces.md) — Records smooth freehand drawing inputs from a user using a canvas element with curve interpolation. ([source](http://szimek.github.io/signature_pad))
- [Electronic Signature Input Components](https://awesome-repositories.com/f/user-interface-experience/electronic-signature-input-components.md) — Ships a user interface component for collecting electronic signatures with support for stroke undo and serialization.
- [Handwriting Input Interfaces](https://awesome-repositories.com/f/user-interface-experience/handwriting-input-interfaces.md) — Creates a drawing area that transforms raw mouse or touch movements into smooth, professional-looking handwritten lines.
- [Interactive Drawing Tools](https://awesome-repositories.com/f/user-interface-experience/interactive-drawing-tools.md) — Provides a lightweight implementation for rendering fluid curves and managing drawing states.
- [Drawing Tools](https://awesome-repositories.com/f/user-interface-experience/drawing-tools.md) — Manages the state of the canvas drawing area and allows for reverting or restoring drawing actions. ([source](http://szimek.github.io/signature_pad/))

### Business & Productivity Software

- [Digital Signature Capture Tools](https://awesome-repositories.com/f/business-productivity-software/digital-signature-capture-tools.md) — Collects handwritten user signatures within a web browser using an HTML5 canvas for forms or agreements.

### Graphics & Multimedia

- [Bézier Curve Interpolations](https://awesome-repositories.com/f/graphics-multimedia/bezier-curve-interpolations.md) — Implements quadratic Bézier curve interpolation to transform jagged input points into smooth, professional-looking handwritten lines.
- [Canvas Rendering](https://awesome-repositories.com/f/graphics-multimedia/canvas-rendering.md) — Draws handwritten strokes directly onto an HTML5 canvas element using a 2D rendering context.
- [Handwriting Capture Libraries](https://awesome-repositories.com/f/graphics-multimedia/handwriting-capture-libraries.md) — Provides a utility for recording freehand handwritten inputs and exporting them as SVG or PNG images.
- [SVG-Based Vector Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering.md) — Translates canvas drawing coordinates into scalable vector graphics paths for resolution-independent output.
- [Handwriting Data Serializations](https://awesome-repositories.com/f/graphics-multimedia/handwriting-data-serializations.md) — Serializes the signature into an array of point groups to preserve exact stroke geometry. ([source](https://github.com/szimek/signature_pad/blob/master/README.md))
- [Stroke Data Serializations](https://awesome-repositories.com/f/graphics-multimedia/stroke-data-serializations.md) — Serializes signature data into structured arrays of coordinates and pressure values to preserve exact stroke geometry.

### Security & Cryptography

- [Electronic Signatures](https://awesome-repositories.com/f/security-cryptography/electronic-signatures.md) — Provides a way to add visual signatures to digital documents by capturing fluid pen strokes.

### Content Management & Publishing

- [Raster Image Exports](https://awesome-repositories.com/f/content-management-publishing/content-formats-exporting/export-formats/raster-image-exports.md) — Converts the drawn signature into data URLs, SVG, PNG, or JPG formats for storage and display. ([source](https://github.com/szimek/signature_pad/blob/master/CHANGELOG.md))

### Data & Databases

- [Canvas Data Exports](https://awesome-repositories.com/f/data-databases/data-import-and-export/canvas-data-exports.md) — Converts freehand drawings from a web canvas into SVG or PNG formats for permanent storage.

### Software Engineering & Architecture

- [Lifecycle Tracking](https://awesome-repositories.com/f/software-engineering-architecture/object-oriented-models/stroke-objects/lifecycle-tracking.md) — Coordinates line segments by managing the drawing lifecycle through distinct start, update, and end events.

### Web Development

- [Undo-Redo History](https://awesome-repositories.com/f/web-development/history-management/undo-redo-history.md) — Maintains a history of stroke data groups to allow reverting or restoring drawing actions.