Draw-your-signature pad

A canvas that captures a real drawn signature with a finger or a mouse and serialises it to an image stored with the agreement.

What it is

A canvas pad that measures its own container and scales by device pixel ratio so strokes are crisp on high-DPI phones. It exposes clear, toDataURL and hasInk, and reports ink status so the sign button stays disabled until something is drawn. It can be a fixed height or driven responsively so it grows on larger screens.

Also called: finger signature · wet signature online · sign with your finger

See it
Customer Signature
Customer Signature
Type your full legal name
Marla Zimmerman
Draw your signatureClear
Please initial all 4 sections above (3 of 4 done) before signing.
Sign & Submit Contract
A phone with a signature drawn across the pad and a Clear link above it. src/components/team/SignaturePad.tsx. The real screen, drawn from the product’s own design system. Sample data — no customer information appears here.
How it works
  1. 1A ResizeObserver re-measures the container on breakpoint and orientation changes
  2. 2Drawing coordinates come from getBoundingClientRect so strokes stay aligned at any size
  3. 3onChange reports first ink so the parent can enable submission
  4. 4toDataURL produces the PNG stored on the contract, change order or acceptance record
Why we built it

Signing meant printing the page, and initialling a dozen clauses meant printing all of them. The same pad handles a full signature, per-clause initials and change-order sign-off. It sizes itself to what it is being used for, so a finger on a phone has room to draw legible initials rather than a scrawl in a box built for a desktop mouse.

The problem
  • Signatures misaligned or blurry on high-DPI and rotated screens
  • Typed-only acceptance with no drawn mark
Sound familiar?
What you get
A drawn mark that renders into the printed PDF
Works with a finger, stylus or mouse at any screen size

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 →