Epheos Tech9 min read•Vector Graphics & Cryptography

Smooth Vector Signature Capture & Cryptographic Stamping in HTML5 Canvas

Why naive line-drawing creates jagged signatures, and how combining cubic Bezier curve velocity weighting with SHA-256 verification tokens enables legal-grade document signing.

Key Architectural Takeaways

Velocity-Weighted Thickness: Simulates authentic fountain pens by tapering lines during high-speed strokes and swelling during slow presses.

Cubic Bezier Interpolation: Eliminates jagged corners on touchscreens by dynamically calculating intermediate control points.

Lossless Vector SVG Export: Converts raw coordinate arrays into lightweight, resolution-independent SVG paths.

SHA-256 Tamper Stamping: Binds signer identity, timestamp, document content, and stroke coordinates into a cryptographic verification token.

1. Eliminating Jagged Strokes with Bezier Interpolation

Connecting touch or mouse coordinates with straight lines (ctx.lineTo) produces sharp, polygon-like artifacts. By calculating cubic Bezier curves between rolling 4-point windows, the path curves smoothly through every trajectory:

// Dynamic Stroke Width based on Exponential Moving Average Velocity
export function calculateStrokeWidth(velocity: number, lastVelocity: number, minWidth: number, maxWidth: number): number {
  const smoothedVelocity = 0.7 * velocity + 0.3 * lastVelocity;
  const normalized = 1 - Math.min(10, smoothedVelocity) / 10;
  return Math.max(minWidth, minWidth + normalized * (maxWidth - minWidth));
}

2. Tamper-Evident Document Stamping

Digital signatures require non-repudiation. If any party modifies a single clause in the agreement or alters a signature coordinate after signing, the verification hash fails:

// Cryptographic Stamping Pipeline
export function generateVerificationPayload(signerName: string, email: string, documentText: string, strokes: Stroke[]): VerificationPayload {
  const docHash = sha256(documentText);
  const strokeHash = sha256(JSON.stringify(strokes));
  const timestamp = Date.now();

  const token = sha256(`${signerName}:${email}:${timestamp}:${docHash}:${strokeHash}`);
  return { signerName, email, timestamp, documentHash: docHash, signatureHash: strokeHash, token };
}

Available Open Source on npm & GitHub

Install @epheos/canvas-signer to add vector digital signatures and cryptographic stamping to your web apps.

View on GitHub