Project 69, Forms and input

Signature Pad

Collect a real signature on any device. Lines get thinner when you sign fast, just like ink, and the saved image is trimmed and ready to use.

Main API: Canvas 2D
Input: Pointer events
Dependencies: None
Your browser: Checking

Sign here

Sign with your finger, a stylus or the mouse. Change the pen, undo strokes and download the signature as a PNG.

Sign above the line

Pen

How it works

Sharp on every screenThe canvas is sized in real device pixels and scaled back, so lines stay crisp on phones and high resolution laptops.
Smooth, ink-like linesPoints are joined with quadratic curves through their midpoints. Fast movement makes the line thinner, and pen pressure is used when available.
Trim before savingThe script scans the pixels for the signature's edges and copies just that area, with a little padding, into a new PNG.

canvas.addEventListener("pointermove", (e) => {
  if (!drawing) return;
  const p = point(e), last = pts.at(-1);
  const speed = Math.hypot(p.x - last.x, p.y - last.y) / (p.t - last.t);
  p.w = last.w * 0.6 + base * Math.max(0.45, 1.5 - speed * 0.6) * 0.4; // faster = thinner
  const mid = { x: (last.x + p.x) / 2, y: (last.y + p.y) / 2 };
  ctx.lineWidth = p.w;
  ctx.quadraticCurveTo(last.x, last.y, mid.x, mid.y);
  ctx.stroke();
  pts.push(p);
});