About

Digital signatures require precise stroke rendering to remain legible at various scales. This tool implements Catmull-Rom spline interpolation to smooth raw pointer input into natural curves, then applies velocity-based pressure simulation where faster strokes produce thinner lines - mimicking real pen dynamics. The output is pure black (#000000) on transparent or white background, ensuring maximum contrast ratio of 21:1 for WCAG AAA compliance. Export formats support transparent PNG for document overlay or white-background variants for printing. The undo stack maintains up to 50 stroke states, allowing iterative refinement without starting over.

Signatures fail when aliasing creates jagged edges or when stroke width inconsistency makes them appear forged. The threshold control converts grayscale anti-aliased pixels to pure binary values - pixels above the threshold become white (or transparent), below become black. Setting threshold too low creates blocky signatures; too high loses fine detail. Default value of 128 (midpoint of 0 - 255 range) works for most signatures, but thin strokes may require 160 - 180 to preserve continuity.

Formulas

Stroke smoothing uses Catmull-Rom spline interpolation to convert discrete pointer samples into continuous curves:

P(t) = 0.5 × [(2P₁) + (−P₀ + P₂)t + (2P₀ − 5P₁ + 4P₂ − P₃)t² + (−P₀ + 3P₁ − 3P₂ + P₃)t³]

Where P₀, P₁, P₂, P₃ are four consecutive control points and t ∈ [0, 1] interpolates between P₁ and P₂.

Pressure simulation derives stroke width from pointer velocity:

w = w_base × (1 − s × min(1, vv_max))

Where w_base is user-defined stroke width, s is sensitivity factor (0 - 1), v is current velocity in px/ms, and v_max = 5 px/ms.

Binary threshold conversion transforms anti-aliased grayscale to pure black/white:

output =

{

0 (black) if gray < T255 (white/transparent) otherwise

Where gray = 0.299R + 0.587G + 0.114B (ITU-R BT.601 luminance) and T is user threshold.

Reference Data

Parameter	Range	Default	Effect
Stroke Width	1 - 20 px	3 px	Base pen thickness before pressure simulation
Smoothing Level	0 - 100%	50%	Spline tension; higher = smoother curves
B&W Threshold	0 - 255	128	Grayscale cutoff for binary conversion
Canvas Width	200 - 1200 px	600 px	Export resolution width
Canvas Height	100 - 400 px	200 px	Export resolution height
Pressure Sensitivity	0 - 100%	50%	Velocity-to-width mapping intensity
Export Format	PNG	PNG	Lossless with alpha channel support
Background	Transparent / White	Transparent	Alpha channel or solid #FFFFFF
Undo Stack Depth	50 states	-	Maximum reversible actions
Point Decimation	10,000 pts/stroke	-	Memory limit per stroke
DPI (Print)	72 - 300	150	Pixels per inch for print sizing
Contrast Ratio (B&W)	21:1	-	Pure black on white/transparent
File Size (typical)	5 - 50 KB	-	Depends on stroke complexity
Recommended Signature Width	300 - 500 px	-	Optimal for document embedding
Legal Document Standard	ESIGN Act / eIDAS	-	Electronic signature validity framework

Frequently Asked Questions

Jagged edges occur when smoothing is set too low or stroke width is below 2 px. Increase smoothing to 70 - 80% and use minimum 3 px stroke width. The Catmull-Rom interpolation requires at least 4 sample points per curve segment - drawing too quickly may undersample the stroke path.

Thin strokes with anti-aliased edges contain many mid-gray pixels. Default threshold of 128 may eliminate these, causing broken lines. Increase threshold to 160 - 200 to preserve continuity. Test by zooming to 200% - if strokes appear discontinuous, raise threshold incrementally.

The visual signature image itself has no inherent legal weight - validity depends on the signing process context. Under ESIGN Act (US) and eIDAS (EU), intent and consent matter more than image quality. For formal documents, embed the signature via PDF signing tools that add cryptographic timestamps. This tool creates the visual component; pair it with DocuSign, Adobe Sign, or similar for legal binding.

Transparent PNG allows the signature to overlay any background color without visible white rectangles. This is critical for documents with colored headers, watermarks, or non-white paper. White backgrounds create harsh edges when placed on cream (#FFFEF5) or gray (#F5F5F5) document backgrounds.

For web display, 300 - 400 px width suffices at screen resolution (72 - 96 DPI). For print at 300 DPI, calculate required pixels: a 2-inch signature needs 600 px width. This tool's canvas dimensions directly set export resolution - configure before drawing for best results.

Clear action pushes state to the undo stack, so Ctrl+Z or the Undo button restores the previous signature. The stack holds 50 states. However, closing the browser tab clears the undo history - only the most recent signature persists in LocalStorage for session restoration.