Signature Pad

A digital signature pad that captures smooth handwriting from touch, mouse, or stylus input.

Note: Even when using multiple fingers, only the first (primary) pointer is tracked.

Sign here.

Tip. Touch and drag to sign.

Signal Snapshot

X -

Y -

OFFSET X -

OFFSET Y -

PHASE -

POINTER TYPE -

Code

import { pipe, singlePointer } from "cereb";
import { offset, singlePointerSession } from "cereb/operators";

// Subscribe to a single-pointer signal from `window`.
singlePointer(window)
  .pipe(
    // Treat start → end as one session (signals outside the session are ignored).
    singlePointerSession(),

    // `singlePointer(window)` yields window-relative x/y.
    // Compute canvas-relative coordinates and add `offsetX`/`offsetY`.
    offset({ target: canvas }),
  ).on((signal) => {
    // Read values from the signal and draw.
    const { phase, offsetX, offsetY, pointerType } = signal.value;

    drawSignature({
      x: offsetX,
      y: offsetY,
      phase,
      pointerType,
    });
  });