Typed legal name and drawn ink, both required

A canvas signature pad plus a typed full legal name plus an explicit acknowledgment — the combination the contracts themselves define as the binding electronic signature.

What it is

SignaturePad is a canvas that tracks pointer and touch events, scales its bitmap by devicePixelRatio for crisp lines on phones, re-measures itself on resize and orientation change so strokes stay aligned, and serialises to a base64 PNG. Every signing surface in the platform — customer contract, counter-sign, change order, crew acceptance — uses the same component.

Also called: signature pad · draw your signature · electronic signature · E-SIGN UETA

See it
Typed legal name and drawn ink, both required
Prepared for
Gideon Alt
1140 Ridge Line Rd · Fair Play
Shell package$28,954
Concrete & site$8,406
Doors & windows$5,604
Trim & finish$3,736
Total
$46,700
Signature
The signature canvas mid-stroke with the Clear link above it, beside the typed-name field in the display font. SignaturePad.tsx. Sample data — no customer information appears here.
How it works
  1. 1The pad exposes clear(), toDataURL() and hasInk() through a ref.
  2. 2A ResizeObserver re-sizes the bitmap from the container's real box so a responsive height class works.
  3. 3The sign button requires name length ≥ 3, hasInk true, and the acknowledgment checkbox ticked.
  4. 4The contract's own closing paragraph states the legal basis: typed names and drawn signatures 'constitute legally binding electronic signatures under applicable e-signature law (E-SIGN Act, UETA, or equivalent jurisdictional law).'
Why we built it

The pad's docstring explains the sizing work: 'uses devicePixelRatio so high-DPI displays render crisp lines', and the responsive note adds that the canvas 'measures its own container, so finger/stylus drawing stays accurately aligned at any size.' A pad whose strokes land offset from the finger is a pad customers abandon.

The problem
  • Typed-only signatures that look like nothing on a printed contract
  • Signature pads that misalign strokes on mobile
Sound familiar?
What you get
A drawn signature that prints like a real one
Works with a finger, a stylus or a mouse
Same pad everywhere, so it behaves the same everywhere

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →