About

A handwritten signature remains the primary biometric identifier in legal, financial, and contractual contexts. Reproducing one digitally with insufficient fidelity risks rejected documents, questioned authenticity, and wasted time. This tool captures pointer input at sub-pixel resolution and applies quadratic Bézier interpolation between stroke midpoints, producing curves indistinguishable from ink on paper. Stroke width modulates dynamically: the algorithm derives instantaneous velocity v from consecutive pointer timestamps and maps it inversely to line thickness via w = w_base ⋅ (1 − v ÷ v_max), replicating the pressure response of a felt-tip pen. Exports are generated as lossless PNG with transparent background or resolution-independent SVG vector paths.

Limitations apply. This tool approximates calligraphic pressure from velocity when true stylus pressure data is unavailable (standard mice). Results improve substantially with a graphics tablet or touchscreen stylus that reports pressure. The generated signature is a graphical asset, not a cryptographically bound electronic signature per eIDAS or ESIGN Act standards. For legal binding, embed the exported image into a document-signing workflow that provides tamper-evident audit trails.

Formulas

Stroke width at each point is computed from instantaneous pointer velocity. Given two consecutive points P_i and P_i−1 captured at times t_i and t_i−1:

v_i = √(x_i − x_i−1)² + (y_i − y_i−1)²t_i − t_i−1

The velocity is clamped and normalized to compute a width factor:

w_i = w_base ⋅ (1 − α ⋅ min(v_i ÷ v_max, 1))^γ

Where w_base = base stroke width from preset, α = dampening factor (range 0.3 - 0.8), γ = pressure curve exponent (1.0 linear, 2.0 quadratic, 3.0 cubic), v_max = maximum expected velocity threshold.

When native pressure p is available from the Pointer Events API (0 ≤ p ≤ 1), it replaces the velocity-derived factor directly:

w_i = w_min + (w_base − w_min) ⋅ p^γ

Curve smoothing uses quadratic Bézier interpolation. For three consecutive points P₀, P₁, P₂, the midpoints M₀₁ and M₁₂ serve as curve start/end, with P₁ as the control point:

B(t) = (1 − t)² ⋅ M₀₁ + 2(1 − t)t ⋅ P₁ + t² ⋅ M₁₂

Where t ∈ [0, 1]. This produces G1-continuous curves with no sharp corners, matching natural handwriting flow.

Reference Data

Style Preset	Stroke Character	Base Width	Pressure Curve	Taper	Best For
Executive Bold	Thick, confident strokes	4.0px	Linear	Medium end-taper	Contracts, formal letters
Classic Pen	Medium weight, balanced	2.5px	Quadratic	Light taper	General documents
Calligraphic	Variable thick/thin contrast	3.5px	Cubic	Strong start/end taper	Artistic, invitations
Fine Tip	Thin, precise strokes	1.5px	Linear	None	Small signature blocks
Marker Bold	Very thick, flat strokes	6.0px	Flat (no variation)	None	Stamps, watermarks
Brush Script	Organic, flowing	3.0px	Exponential	Strong taper both ends	Creative, branding

Export Format	Type	Transparency	Scalability	File Size (typical)	Use Case
PNG	Raster	Yes (alpha channel)	Fixed resolution	5 - 50KB	Email signatures, PDFs, web
SVG	Vector	Yes	Infinite (vector paths)	2 - 20KB	Print, high-DPI, branding

Input Device	Pressure Data	Precision	Recommendation
Mouse	Simulated from velocity	Medium	Use slow, deliberate strokes
Trackpad	Simulated from velocity	Low - Medium	Functional but less natural
Touchscreen (finger)	Simulated from velocity	Medium	Good for mobile signing
Apple Pencil / S Pen	Native pressure levels	High	Best results, true calligraphy
Wacom / Graphics Tablet	Native 2048+ levels	Very High	Professional quality output

Frequently Asked Questions

A mouse reports no pressure data (pressure defaults to 0.5), so the tool derives stroke width from velocity. Fast mouse movements produce thin strokes. Slow down deliberately to get thicker lines. A stylus with pressure sensitivity (Apple Pencil, Wacom) sends 0 - 1 pressure values per point, giving true calligraphic variation. For the boldest mouse strokes, select the "Marker Bold" or "Executive Bold" preset, which uses a higher base width w_base of 6.0px or 4.0px.

The canvas renders at 2× device pixel ratio by default. On a standard display, this produces a canvas of approximately 1200×600px, sufficient for email signatures and on-screen documents. For print at 300DPI, this corresponds to roughly 4×2inches. If you need a larger print-quality signature, export as SVG instead. SVG paths are resolution-independent and will render crisp at any size.

The exponent γ controls the mapping from raw pressure (or velocity-derived pressure) to stroke width. With γ = 1.0 (linear), width scales proportionally. At γ = 2.0 (quadratic), light touches stay thin longer and only heavy pressure produces full width, creating dramatic thick-thin contrast. At γ = 3.0 (cubic), the effect is more extreme. The Calligraphic preset uses quadratic, while Brush Script uses exponential mapping for maximum expressiveness.

The image itself is a graphical representation, not a cryptographically signed token. Under ESIGN Act (US) and eIDAS (EU), a simple electronic signature can be a typed name, a click, or an image of a handwritten signature, provided there is intent to sign and the signature is associated with a record. However, for Advanced or Qualified Electronic Signatures (QES), you need a certificate-based signing service (DocuSign, Adobe Sign). This tool produces the visual asset. Embed it into a proper signing workflow for legal weight.

Quadratic Bézier curves guarantee G1 continuity (smooth tangents), which means the algorithm cannot produce sharp corners. At abrupt direction reversals, the control point P₁ pulls the curve outward, creating a slight bulge. This is intentional for signature aesthetics since natural handwriting rarely has true sharp corners. If you need sharper angles, reduce your stroke speed at the turning point; the algorithm uses shorter segment distances at low velocity, minimizing overshoot.

No data leaves your browser. All drawing, processing, and export happen entirely client-side using the Canvas API and JavaScript. Stroke data is stored temporarily in memory during your session and optionally persisted to your browser's LocalStorage for convenience on reload. Clearing your browser data removes it. No server, no cookies, no analytics. The exported PNG or SVG file exists only on your device after download.