How to develop a signature field without errors and legal risks?
The courier hands the tablet to the client for signing — and the signature is blurry due to HiDPI. Or the page scrolls instead of drawing. Such errors aren't just annoying: 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 precision. Our team has extensive experience in developing web forms for fintech and legal projects. We solve these problems at the architecture level: from touch event handling to metadata storage. Our approach ensures clarity on any display, correct behavior on mobile devices, and legal validity for each signature.
Which problems does a well-implemented signature field solve?
Problem 1: HiDPI and clarity
On Retina displays, a signature drawn on canvas without accounting for devicePixelRatio will be blurry. The solution is to scale the canvas according to the ratio. This reduces eye strain 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 while drawing is active — otherwise behavior is standard.
Problem 3: Choosing a storage format
PNG is universal but takes up a lot of space and doesn't scale. SVG is vector but editable. JSON with points is minimal in size (average 2–5 KB) and allows restoration at any resolution. For legally significant documents, we recommend JSON plus metadata.
Problem 4: Legal validity
A simple image does not prove that the right person signed. We preserve the chain: timestamp, IP, user-agent, document hash. This is accepted in courts as simple electronic signing.
How we do it: stack and approach
We use the signature_pad library (MIT, ~4 KB gzip) for drawing and export. It smoothes Bezier curves and supports SVG. For PDF we use pdf-lib — it works both in the browser and on the server.
Case: for a fintech project, we chose storing points + metadata in PostgreSQL. When the page loads, the signature is restored via pad.fromData(). PDF is generated on the server — this is more secure and faster than client-side. The result is a legally valid document tied to the session.
Why canvas is the foundation for a signature field?
Canvas is the only browser API that allows pixel-precise drawing. Alternatives fall short: SVG is 10 times slower when processing each stroke, and CSS elements are not suitable for handwriting input. Canvas gives full control and integrates easily with export.
Signature storage formats
| Format | Size | Scalability | Legal validity |
|---|---|---|---|
| PNG (base64) | Medium | No (pixel) | Low (replaceable) |
| SVG | Small | Yes (vector) | Medium (easily editable) |
| JSON (points) | Very small (2–5 KB) | Yes (renders at any resolution) | High (reproduces drawing process) |
| PDF (embedded) | Depends on document | Yes | High (with metadata) |
Work process
- Requirements analysis — devices, browsers, legal norms, needed formats.
- Architecture design — storage choice, libraries, PDF generation method.
- Component development — canvas setup, event handling, HiDPI, scroll blocking.
- Backend integration — API for saving/loading signature, server-side PDF generation.
- Testing — on real devices (iOS/Android, desktop), legal chain verification.
- Deployment and documentation — CI/CD, README with usage examples.
| Stage | Duration | Description |
|---|---|---|
| Analysis | 1 day | Requirements, devices, legal norms |
| 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 result
- Ready-to-use signature field component with configurable color, thickness, background.
- Export to PNG, SVG, JSON (as chosen) — saves up to 80% space when storing points.
- Signature restoration from JSON at any resolution.
- Integration with PDF generation (pdf-lib) with metadata.
- API documentation and usage examples.
- One month of support after delivery.
Technical implementation details
- Context reset: on each drawing we clear the canvas and redraw all saved points.
- Touch event handling: we use pointer events to unify mouse and touchscreen.
- HiDPI: multiply canvas size by window.devicePixelRatio and scale the context.
- Scroll blocking: set CSS touch-action: none on canvas and disable upon drawing completion.
Typical implementation mistakes (and how to avoid them)
- Forgetting HiDPI — signature is blurry. Solution: use devicePixelRatio.
- Not blocking scroll — page moves. Solution: touch-action: none on canvas.
- Storing only PNG — loss of scalability and legal strength. Solution: store JSON + metadata.
- Generating PDF client-side — security and size issues. Solution: server-side generation via pdf-lib.
Contact us for an estimate of your task — we'll analyze requirements and propose the optimal solution. Order turnkey development: from prototype to deployment with quality guarantee.
Learn more about Canvas API and the signature_pad library.