signature_pad

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.