How to develop a signature form without errors and legal risks?
A courier hands the tablet to the client for a signature — and the signature is blurry due to HiDPI. Or the page scrolls instead of drawing. Such errors are not just unpleasant: they undermine trust and can lead to legal disputes.
For example, when signing an insurance contract via a mobile app, every stroke must be captured with pixel-perfect precision. Our team has 7+ years of experience developing web forms for fintech and legal projects.
We solve these problems at the architecture level: from handling touch events to storing metadata. Our approach guarantees clarity on any display, correct behavior on mobile devices, and the legal validity of every signature.
What problems does a well-implemented signature field solve?
Problem 1: HiDPI and clarity
On Retina displays, a signature on canvas without accounting for devicePixelRatio will be blurry. The solution is to scale the canvas according to the ratio. This reduces eye strain for the user and improves perception. Typical traffic savings when using vectorized storage reach 80%.
Problem 2: Scrolling instead of drawing on mobile
Without touch-action: none on the canvas, the page scrolls. We block scrolling only during active drawing — the rest of the time the behavior is standard.
Problem 3: Choosing a storage format
PNG is universal, but takes up a lot of space and does not scale. SVG is vector-based, but editable. JSON with points — minimal size (on average 2–5 KB) and the ability to restore at any resolution. For legally significant documents, we recommend JSON + metadata.
Problem 4: Legal validity
A simple image does not prove that it was signed by that particular person. We store a chain: timestamp, IP, user-agent, document hash. This is recognized in courts as a simple electronic signature.
How we do it: stack and approach
We use the signature_pad library (MIT, ~4 KB gzip) for drawing and export. It smooths Bezier curves and supports SVG. For PDF we use pdf-lib — it works both in the browser and on the server.
Case study: for a fintech project, we chose to store points + metadata in PostgreSQL. When the page loads, the signature is restored via pad.fromData(). The PDF is generated on the server — this is safer and faster than on the client. The result is a legally significant document tied to the session.
Why is canvas the foundation for a signature field?
Canvas is the only browser API that allows drawing with pixel precision. Alternatives fall short: SVG is 10 times slower when processing each stroke, while CSS elements are not suitable for handwritten input. Canvas gives full control and integrates easily with export.
Signature storage formats
| Format | Size | Scalability | Legal significance |
|---|---|---|---|
| PNG (base64) | Medium | No (pixels) | Low (can be replaced) |
| SVG | Small | Yes (vector) | Medium (easy to edit) |
| JSON (points) | Very small (2–5 KB) | Yes (rendering at any resolution) | High (restores drawing process) |
| PDF (embedded) | Depends on document | Yes | High (if with metadata) |
Work process
- Requirements analysis — devices, browsers, legal regulations, required formats.
- Architecture design — selecting storage, libraries, PDF generation method.
- Component development — canvas setup, event handling, HiDPI, scroll locking.
- Backend integration — API for saving/loading signatures, server-side PDF generation.
- Testing — on real devices (iOS/Android, desktop), verification of the legal chain.
- Deployment and documentation — CI/CD, README with invocation examples.
| Stage | Duration | Description |
|---|---|---|
| Analysis | 1 day | Requirements, devices, legal regulations |
| Design | 1 day | Architecture, library selection |
| Development | 2–3 days | Code, canvas integration, PDF |
| Testing | 1 day | On devices, regression |
| Documentation | 0.5 day | API, instructions |
What's included in the deliverable
- A ready-to-use signature field component with configurable color, thickness, and background.
- Export to PNG, SVG, JSON (your choice) — saving up to 80% of space when storing points.
- Restoring a signature from JSON at any resolution.
- Integration with PDF generation (pdf-lib) including metadata.
- API documentation and usage examples.
- One month of support after delivery.
Technical implementation details
- Context reset: on every stroke we clear the canvas and redraw all stored points.
- Touch event handling: we use pointer events to unify mouse and touchscreen.
- HiDPI: we multiply the canvas size by window.devicePixelRatio and scale the context.
- Scroll locking: we set the CSS touch-action: none on the canvas and disable it when drawing ends.
Common implementation mistakes (and how to avoid them)
- Forgetting about HiDPI — the signature is blurry. Solution: use devicePixelRatio.
- Not blocking scroll — the page moves. Solution: touch-action: none on canvas.
- Storing only PNG — loss of scalability and legal validity. Solution: store JSON + metadata.
- Generating PDF on the client — security and size issues. Solution: server-side generation via pdf-lib.
Contact us to evaluate your task — we will analyze the requirements and propose an optimal solution. Order turnkey development: from prototype to deployment with a quality guarantee.
Learn more about the Canvas API and the signature_pad library.
