Signature Pad (Electronic Signature) Implementation for Website

Signature Pad (Electronic Signature) Implementation

An electronic signature field is needed in contracts, applications, acceptance acts, medical forms. The user signs with a mouse or stylus, the signature is saved as SVG or PNG and attached to the document.

signature_pad Library

signature_pad is a minimalist library (8 KB) from Szimek that works over <canvas>. It supports Pointer Events, touch, stylus with pressure, export to PNG/SVG/JPEG.

npm install signature_pad

Basic Implementation

import SignaturePad from 'signature_pad'
import { useEffect, useRef, useCallback } from 'react'

interface SignaturePadProps {
  onSave: (dataUrl: string) => void
  width?: number
  height?: number
}

export function SignatureCanvas({ onSave, width = 500, height = 200 }: SignaturePadProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const padRef = useRef<SignaturePad | null>(null)

  useEffect(() => {
    const canvas = canvasRef.current!
    padRef.current = new SignaturePad(canvas, {
      minWidth: 0.5,
      maxWidth: 2.5,
      penColor: '#1e293b',
      backgroundColor: 'rgb(255,255,255)',
      throttle: 16, // ms between points
    })

    // HiDPI support
    function resizeCanvas() {
      const ratio = Math.max(window.devicePixelRatio || 1, 1)
      canvas.width = canvas.offsetWidth * ratio
      canvas.height = canvas.offsetHeight * ratio
      canvas.getContext('2d')!.scale(ratio, ratio)
      padRef.current!.clear()
    }

    resizeCanvas()
    window.addEventListener('resize', resizeCanvas)
    return () => {
      window.removeEventListener('resize', resizeCanvas)
      padRef.current!.off()
    }
  }, [])

  const handleSave = useCallback(() => {
    if (!padRef.current) return
    if (padRef.current.isEmpty()) {
      alert('Please sign')
      return
    }
    // PNG with transparent background
    const dataUrl = padRef.current.toDataURL('image/png')
    onSave(dataUrl)
  }, [onSave])

  const handleClear = useCallback(() => {
    padRef.current?.clear()
  }, [])

  const handleUndo = useCallback(() => {
    const data = padRef.current?.toData()
    if (data && data.length > 0) {
      data.pop() // Remove last stroke
      padRef.current?.fromData(data)
    }
  }, [])

  return (
    <div className="border rounded-lg overflow-hidden">
      <canvas
        ref={canvasRef}
        style={{ width, height, touchAction: 'none' }}
        className="block w-full"
      />
      <div className="flex justify-between p-2 bg-gray-50 border-t">
        <div className="flex gap-2">
          <button
            type="button"
            onClick={handleUndo}
            className="text-sm text-gray-600 hover:text-gray-900"
          >
            Undo stroke
          </button>
          <button
            type="button"
            onClick={handleClear}
            className="text-sm text-red-500 hover:text-red-700"
          >
            Clear
          </button>
        </div>
        <button
          type="button"
          onClick={handleSave}
          className="px-4 py-1 bg-blue-600 text-white rounded text-sm"
        >
          Apply signature
        </button>
      </div>
    </div>
  )
}

Export to SVG

SVG is better than PNG for signatures — scales without quality loss, smaller file size, can be embedded directly in PDF:

const svgData = padRef.current.toSVG()
// <svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>

// Or via Blob for file saving
const blob = new Blob([svgData], { type: 'image/svg+xml' })
const url = URL.createObjectURL(blob)

Embedding signature in PDF on backend

// Node.js, pdf-lib library
import { PDFDocument } from 'pdf-lib'

async function embedSignatureInPdf(
  pdfBytes: Uint8Array,
  signatureDataUrl: string,
  page: number = 0
): Promise<Uint8Array> {
  const pdfDoc = await PDFDocument.load(pdfBytes)
  const pages = pdfDoc.getPages()
  const targetPage = pages[page]

  // Decode base64 PNG
  const signatureBase64 = signatureDataUrl.replace(/^data:image\/png;base64,/, '')
  const signatureBytes = Buffer.from(signatureBase64, 'base64')
  const signatureImage = await pdfDoc.embedPng(signatureBytes)

  const { width, height } = signatureImage.scale(0.5)

  targetPage.drawImage(signatureImage, {
    x: 60,
    y: 60,
    width,
    height,
    opacity: 1,
  })

  return pdfDoc.save()
}

React Hook Form Integration

import { Controller } from 'react-hook-form'

function ContractForm() {
  const { control, handleSubmit } = useForm<{
    name: string
    signature: string
  }>()

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        control={control}
        name="signature"
        rules={{ required: 'Signature is required' }}
        render={({ field, fieldState }) => (
          <div>
            <SignatureCanvas
              onSave={(dataUrl) => field.onChange(dataUrl)}
              width={500}
              height={180}
            />
            {fieldState.error && (
              <p className="text-red-500 text-sm mt-1">{fieldState.error.message}</p>
            )}
          </div>
        )}
      />
      <button type="submit">Sign contract</button>
    </form>
  )
}

What we do

Connect signature_pad, set up HiDPI, export to PNG or SVG, embed signature in PDF via pdf-lib on the backend. Integrate with form, add validation (check that signature is not empty).

Timeline: 0.5–1 day.