Signature Pad

To prevent blurry signatures on high-resolution (Retina) screens, you must scale the canvas based on devicePixelRatio. This ensures the drawing surface matches the physical pixel density.

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);
    signaturePad.clear(); // otherwise isEmpty() might return incorrect value
}

window.addEventListener("resize", resizeCanvas);
resizeCanvas();

You can install the latest release using npm or Yarn, or include it directly in your HTML via a CDN script tag. The library is provided as both UMD and ES6 modules.

npm install --save signature_pad

yarn add signature_pad

<script src="https://cdn.jsdelivr.net/npm/signature_pad@[version]/dist/signature_pad.umd.min.js"></script>

To use the library, select a <canvas> element from the DOM and pass it to the SignaturePad constructor. You can optionally provide an options object during initialization.

const canvas = document.querySelector("canvas");
const signaturePad = new SignaturePad(canvas);

Options can be set during initialization or updated at runtime by assigning values directly to the instance properties.

// During initialization
const signaturePad = new SignaturePad(canvas, {
    minWidth: 5,
    maxWidth: 10,
    penColor: "rgb(66, 133, 244)"
});

// During runtime
signaturePad.minWidth = 5;
signaturePad.penColor = "black";

Use clear() to wipe the canvas, redraw() to refresh the drawing, and isEmpty() to check if any strokes have been made. You can also listen to stroke lifecycle events using addEventListener.

signaturePad.clear();
signaturePad.isEmpty();
signaturePad.redraw();

// Event listeners
signaturePad.addEventListener("beginStroke", () => {
  console.log("Signature started");
});

Use toDataURL() to get a base64 encoded image string (PNG, JPEG, etc.) or toSVG() to get an SVG string. These are useful for saving the signature to a database or displaying it later.

// Save as PNG
signaturePad.toDataURL(); 

// Save as JPEG with 0.5 quality
signaturePad.toDataURL("image/jpeg", 0.5); 

// Save as SVG string
signaturePad.toSVG(); 

// Save as SVG with background color included
signaturePad.toSVG({includeBackgroundColor: true});

You can redraw a signature using fromDataURL() (from a base64 image string) or fromData() (from the internal point group array).

Note: fromDataURL does not populate the internal data structure, so subsequent calls to toData() will not work correctly after using it.

// From a Data URL
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");

// From internal point groups
const data = signaturePad.toData();
signaturePad.fromData(data);

// From point groups without clearing existing drawing
signaturePad.fromData(data, { clear: false });

The Options object allows you to customize the drawing behavior and appearance. Note that many properties can also be set per-stroke via PointGroupOptions when using fromData.

interface Options extends Partial<PointGroupOptions> {
  minDistance?: number; // in pixels
  backgroundColor?: string; // CSS color string
  throttle?: number; // in milliseconds
  canvasContextOptions?: CanvasRenderingContext2DSettings;
}

interface PointGroupOptions {
  dotSize: number;
  minWidth: number;
  maxWidth: number;
  penColor: string;
  velocityFilterWeight: number;
  compositeOperation: GlobalCompositeOperation;
}

Events that can be attached via addEventListener.

beginStroke: Triggered before stroke begins. Can be canceled with event.preventDefault().
endStroke: Triggered after stroke ends.
beforeUpdateStroke: Triggered before stroke update.
afterUpdateStroke: Triggered after stroke update.

The toSVG() method generates a raw SVG string representing the signature. You can include the background color or a data URL of the original image in the resulting SVG.

const svgString = signaturePad.toSVG({
  includeBackgroundColor: true,
  includeDataUrl: false
});