Best JavaScript & TypeScript Signature Pad Libraries in 2026 (Canvas vs API)

// Mathematical curve smoothing between sampled pointer points
function calculateCurveControlPoints(p0: Point, p1: Point, p2: Point) {
  const d1 = Math.hypot(p1.x - p0.x, p1.y - p0.y);
  const d2 = Math.hypot(p2.x - p1.x, p2.y - p1.y);
  
  // Tangent calculation for smooth acceleration transitions
  const fa = (d1 / (d1 + d2)) * 0.5;
  const fb = (d2 / (d1 + d2)) * 0.5;
  
  return {
    c1: { x: p1.x - fa * (p2.x - p0.x), y: p1.y - fa * (p2.y - p0.y) },
    c2: { x: p1.x + fb * (p2.x - p0.x), y: p1.y + fb * (p2.y - p0.y) },
  };
}

canvas.addEventListener("pointermove", (event: PointerEvent) => {
  if (!isDrawing) return;

  // Retrieve un-throttled hardware touch samples
  const events = typeof event.getCoalescedEvents === "function"
    ? event.getCoalescedEvents()
    : [event];

  for (const e of events) {
    addSampledPoint(e.clientX, e.clientY, e.pressure);
  }
  requestAnimationFrame(renderStrokeBuffer);
});

function resizeCanvasToDisplaySize(canvas: HTMLCanvasElement) {
  const dpr = window.devicePixelRatio || 1;
  const rect = canvas.getBoundingClientRect();
  
  // Set internal canvas bitmap size
  canvas.width = Math.round(rect.width * dpr);
  canvas.height = Math.round(rect.height * dpr);
  
  const ctx = canvas.getContext("2d");
  if (ctx) {
    // Scale coordinate system so 1 canvas unit = 1 CSS pixel
    ctx.scale(dpr, dpr);
  }
}

"use client";

import React, { useRef, useState, useEffect } from "react";
import SignaturePad from "signature_pad";

interface CertifiedSignaturePadProps {
  documentTitle: string;
  contractMarkdown: string;
  recipientName: string;
  recipientEmail: string;
  onSuccess?: (certificate: { documentId: string; pdfUrl: string; sha256: string }) => void;
}

export function CertifiedSignaturePad({
  documentTitle,
  contractMarkdown,
  recipientName,
  recipientEmail,
  onSuccess,
}: CertifiedSignaturePadProps) {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const padRef = useRef<SignaturePad | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [certifiedResult, setCertifiedResult] = useState<{
    documentId: string;
    pdfUrl: string;
    sha256: string;
  } | null>(null);

  // Initialize Canvas & SignaturePad with High-DPI support
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    // Handle High-DPI / Retina displays
    const ratio = Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    const ctx = canvas.getContext("2d");
    if (ctx) ctx.scale(ratio, ratio);

    const pad = new SignaturePad(canvas, {
      minWidth: 1.2,
      maxWidth: 3.5,
      penColor: "#09090b", // Dark ink
      velocityFilterWeight: 0.7, // Smooth Bézier inertia
    });

    padRef.current = pad;

    return () => {
      pad.off();
    };
  }, []);

  const handleClear = () => {
    padRef.current?.clear();
    setError(null);
  };

  const handleCertifyAndSign = async () => {
    if (!padRef.current || padRef.current.isEmpty()) {
      setError("Please draw your signature before submitting.");
      return;
    }

    setIsSubmitting(true);
    setError(null);

    try {
      // 1. Export vector/raster signature from canvas
      const signatureDataUrl = padRef.current.toDataURL("image/png");

      // 2. Dispatch to your Next.js API route or directly to Signbee
      const response = await fetch("https://signb.ee/api/v1/send", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${process.env.NEXT_PUBLIC_SIGNBEE_KEY}`,
        },
        body: JSON.stringify({
          title: documentTitle,
          markdown: contractMarkdown,
          recipient_name: recipientName,
          recipient_email: recipientEmail,
          signature_image: signatureDataUrl,
          certified_at: new Date().toISOString(),
          metadata: {
            source: "canvas_certified_component_v1",
            user_agent: typeof navigator !== "undefined" ? navigator.userAgent : "unknown",
          },
        }),
      });

      if (!response.ok) {
        const errText = await response.text();
        throw new Error(`Certification failed: ${errText}`);
      }

      const data = await response.json();
      const result = {
        documentId: data.id,
        pdfUrl: data.pdf_url,
        sha256: data.sha256_hash,
      };

      setCertifiedResult(result);
      if (onSuccess) onSuccess(result);
    } catch (err: any) {
      setError(err.message || "An unexpected error occurred during document certification.");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="w-full max-w-lg rounded-xl border border-zinc-800 bg-zinc-900/70 p-6 shadow-2xl backdrop-blur-md">
      <div className="mb-4">
        <h3 className="text-lg font-semibold text-white tracking-tight">
          Draw Your Signature
        </h3>
        <p className="text-xs text-zinc-400 mt-1">
          Signing for <span className="text-amber-400">{recipientName}</span> ({recipientEmail})
        </p>
      </div>

      {/* Drawing Canvas Container */}
      <div className="relative mb-4 overflow-hidden rounded-lg border border-zinc-700 bg-white shadow-inner">
        <canvas
          ref={canvasRef}
          className="h-44 w-full touch-none cursor-crosshair"
          style={{ touchAction: "none" }}
        />
        <div className="absolute bottom-2 right-2 text-[10px] font-mono text-zinc-400 pointer-events-none select-none">
          Sign on the line above
        </div>
      </div>

      {error && (
        <div className="mb-4 rounded-md bg-red-500/10 border border-red-500/20 p-3 text-xs text-red-400">
          {error}
        </div>
      )}

      {certifiedResult ? (
        <div className="rounded-lg bg-emerald-500/10 border border-emerald-500/20 p-4 text-xs text-emerald-300 space-y-2">
          <div className="flex items-center gap-2 font-semibold text-emerald-400">
            <span>✓ Cryptographically Certified &amp; Sealed</span>
          </div>
          <p className="text-emerald-300/80">
            Document ID: <code className="text-white font-mono">{certifiedResult.documentId}</code>
          </p>
          <p className="text-emerald-300/80 break-all">
            SHA-256: <code className="text-[11px] text-zinc-300 font-mono">{certifiedResult.sha256}</code>
          </p>
          <div className="pt-2">
            <a
              href={certifiedResult.pdfUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1 font-medium text-amber-400 hover:text-amber-300 underline"
            >
              Download Certified Audit PDF &rarr;
            </a>
          </div>
        </div>
      ) : (
        <div className="flex items-center justify-between gap-3 pt-2">
          <button
            type="button"
            onClick={handleClear}
            disabled={isSubmitting}
            className="rounded-md px-3.5 py-2 text-xs font-medium text-zinc-400 hover:text-white hover:bg-zinc-800 transition-colors disabled:opacity-50"
          >
            Clear Canvas
          </button>
          <button
            type="button"
            onClick={handleCertifyAndSign}
            disabled={isSubmitting}
            className="inline-flex items-center gap-2 rounded-md bg-amber-400 px-5 py-2 text-xs font-semibold text-zinc-950 hover:bg-amber-300 transition-colors disabled:opacity-50"
          >
            {isSubmitting ? "Certifying with Signbee..." : "Sign & Certify Document"}
          </button>
        </div>
      )}
    </div>
  );
}