Signature Pad

https://github.com/szimek/signature_pad
Admin
Signature Pad is a JavaScript library for drawing smooth signatures, based on HTML5 canvas and...
Tokens:25,418
Snippets:203
Trust Score:9.5
License:MIT
Update:1 week ago
Show doc for...
Tokens:
Raw
### Bezier.fromPoints basic example

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/bezier.md

Example of creating a Bezier curve from four points and logging the start and end points.

```javascript
const pts = [new Point(0, 0), new Point(10, 10), new Point(20, 5), new Point(30, 20)];
const curve = Bezier.fromPoints(pts, { start: 0.5, end: 2.5 });
console.log(curve.startPoint, curve.endPoint); // Point(10,10), Point(20,5)
```

--------------------------------

### Install Signature Pad with Yarn

Source: https://github.com/szimek/signature_pad/blob/master/README.md

Install the latest release of Signature Pad using Yarn as an alternative to npm. This is the standard installation method for projects using Yarn.

```bash
yarn add signature_pad
```

--------------------------------

### Install Signature Pad with npm

Source: https://github.com/szimek/signature_pad/blob/master/README.md

Install the latest release of Signature Pad using npm. This is the standard installation method for Node.js projects.

```bash
npm install --save signature_pad
```

--------------------------------

### Basic initialization with new SignaturePad

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

JavaScript example showing how to create a SignaturePad instance on a canvas element.

```js
const canvas = document.querySelector('canvas');
const signaturePad = new SignaturePad(canvas);
```

--------------------------------

### Bezier constructor example

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/bezier.md

Example of instantiating a Bezier curve with explicit control points and widths.

```javascript
const curve = new Bezier(
  new Point(0, 0), new Point(30, 40), new Point(60, 10), new Point(100, 25),
  0.5, 2.0,
);
```

--------------------------------

### Load serialized signature with fromData()

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Example showing how to load a serialized signature into a new SignaturePad instance.

```javascript
const data = signaturePad.toData();   // serialized signature
// ... persist data ...
const pad2 = new SignaturePad(otherCanvas);
pad2.fromData(data);
```

--------------------------------

### Basic construction example

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/point.md

Creates a Point with coordinates, pressure, and time, then logs its properties. Demonstrates typical usage.

```javascript
const p = new Point(120, 45, 0.5, Date.now());
console.log(p.x, p.y, p.pressure, p.time);
```

--------------------------------

### Bezier.length example

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/bezier.md

Example of calling length() and logging the approximated curve length.

```javascript
const l = curve.length();
console.log(`curve length ≈ ${l}`);
```

--------------------------------

### SignaturePad with options and runtime property changes

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

JavaScript example demonstrating passing options to the constructor and changing properties at runtime. Includes minWidth, maxWidth, penColor, throttle, minDistance, backgroundColor, and canvasContextOptions.

```js
const signaturePad = new SignaturePad(canvas, {
  minWidth: 5,
  maxWidth: 10,
  penColor: 'rgb(66, 133, 244)',
  throttle: 16,
  minDistance: 5,
  backgroundColor: 'rgb(255,255,255)', // opaque, required for JPEG output
  canvasContextOptions: { willReadFrequently: true },
});

// Options can also be changed at runtime:
signaturePad.minWidth = 5;
signaturePad.penColor = 'red';
```

--------------------------------

### Clear the signature pad and check isEmpty

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

JavaScript example showing how to clear the signature pad and verify it is empty.

```js
signaturePad.clear();
console.log(signaturePad.isEmpty()); // true
```

--------------------------------

### Check if signature pad is empty

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Example showing how to check if the signature pad has any content.

```javascript
const hasContent = !signaturePad.isEmpty();
```

--------------------------------

### velocityFrom example

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/point.md

Computes velocity from (0,0) at time 0 to (100,0) at time 50, logging 2 px/ms.

```javascript
const a = new Point(0, 0, 0, 0);
const b = new Point(100, 0, 0, 50);
console.log(b.velocityFrom(a)); // 100 / 50 = 2 px/ms
```

--------------------------------

### equals example

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/point.md

Checks equality between a Point and a plain object with matching fields, logging true.

```javascript
const a = new Point(1, 2, 0, 1000);
console.log(a.equals({ x: 1, y: 2, pressure: 0, time: 1000 })); // true
```

--------------------------------

### distanceTo example

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/point.md

Computes distance between (0,0) and (4,3), logging 5. Demonstrates Euclidean distance calculation.

```javascript
const a = new Point(0, 0);
const b = new Point(4, 3);
console.log(a.distanceTo(b)); // 5
```

--------------------------------

### fromDataURL() with options and error handling

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Example showing fromDataURL() with scaling and offset options, wrapped in try/catch to handle load errors.

```javascript
try {
  await signaturePad.fromDataURL(dataUrl, {
    ratio: 1,
    width: 400,
    height: 200,
    xOffset: 100,
    yOffset: 50,
  });
} catch (err) {
  console.error('Image could not be loaded:', err);
}
```

--------------------------------

### Bezier.fromPoints degenerate input example

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/bezier.md

Example with coincident points that may cause division by zero, resulting in a curve length of approximately 0.

```javascript
const same = [p, p, p, p]; // identical Point instances
const curve = Bezier.fromPoints(same, { start: 1, end: 1 }); // k = 0 when l1 + l2 == 0
console.log(curve.length()); // ~0
```

--------------------------------

### Basic throttle usage (JavaScript)

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/throttle.md

Example of using `throttle` as done by `SignaturePad`: imports the function, creates a throttled version of `onMove` with a 16 ms interval, and attaches it to the `pointermove` event.

```javascript
import { throttle } from './src/throttle.js';

const onMove = (e) => draw(e);
const throttled = throttle(onMove, 16);
window.addEventListener('pointermove', throttled);
```

--------------------------------

### Disable drawing with off()

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Example showing how to disable drawing on the signature pad.

```javascript
signaturePad.off();
```

--------------------------------

### Basic toDataURL usage (JavaScript)

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Shows how to get a PNG data URL by default and a JPEG data URL at 50% quality.

```javascript
const pngUrl = signaturePad.toDataURL();                    // PNG
const jpegUrl = signaturePad.toDataURL('image/jpeg', 0.5);  // JPEG at 50% quality
```

--------------------------------

### Re-enable drawing after off()

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Example showing how to re-enable drawing after calling off(). Temporarily allows page panning/zooming over the canvas.

```javascript
signaturePad.off();
// ... temporarily allow page panning/zooming over the canvas ...
signaturePad.on();
```

--------------------------------

### toData usage example

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Shows how to call toData() and access the first point of the first group. The output is an object with x, y, pressure, and time properties.

```js
const groups = signaturePad.toData();
console.log(groups[0].points[0]); // { x, y, pressure, time }
```

--------------------------------

### Use SignaturePad UMD build via script tag

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/configuration.md

Load the UMD build via a script tag; it exposes the class as the global SignaturePad. The example creates a new SignaturePad instance on a canvas element.

```html
<script src="https://cdn.jsdelivr.net/npm/signature_pad@5/dist/signature_pad.umd.min.js"></script>
<script>
  const pad = new SignaturePad(document.querySelector('canvas'));
</script>
```

--------------------------------

### toSVG basic usage example

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Calls toSVG() with no options, returning an SVG string like "<svg...</svg>".

```js
const svg = signaturePad.toSVG(); // "<svg...</svg>"
```

--------------------------------

### Zero wait disables throttling (JavaScript)

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/throttle.md

Example showing that passing `0` as the wait interval makes the function always invoke immediately, effectively disabling throttling. This is how `SignaturePad` supports `throttle: 0`.

```javascript
const noThrottle = throttle(expensiveFn, 0); // always fires immediately
```

--------------------------------

### SVG data URL with options (TypeScript)

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Shows how to get an SVG data URL with options to include background color and data URL.

```typescript
const svgUrl = signaturePad.toDataURL('image/svg+xml', {
  includeBackgroundColor: true,
  includeDataUrl: true,
});
```

--------------------------------

### distanceTo method signature

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/point.md

TypeScript signature for distanceTo, which computes Euclidean distance between this point and a start BasicPoint.

```typescript
public distanceTo(start: BasicPoint): number
```

--------------------------------

### redraw() after loading a data URL

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Example showing redraw() after fromDataURL() and clear() to restore the data URL and point groups.

```javascript
await signaturePad.fromDataURL('data:image/png;base64,iVBORw0K...');
signaturePad.clear();
signaturePad.redraw(); // data URL + point groups are restored
```

--------------------------------

### Bezier.fromPoints basic usage

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/bezier.md

Creates a Bezier curve from an array of at least four points and start/end widths. The start and end points are the middle two points (indices 1 and 2), and control points are derived from surrounding points.

```typescript
public static fromPoints(
  points: Point[],
  widths: { start: number; end: number },
): Bezier
```

--------------------------------

### Configure runtime properties on SignaturePad instance

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/configuration.md

Reassign any option at runtime via the public instance property; the new value takes effect when the next stroke or point group starts. The comment shows that setting compositeOperation to 'destination-out' erases strokes.

```javascript
signaturePad.minWidth = 5;
signaturePad.maxWidth = 10;
signaturePad.penColor = 'rgb(66, 133, 244)';
signaturePad.compositeOperation = 'destination-out'; // erase strokes
```

--------------------------------

### redraw() after canvas resize

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Example showing how to call redraw() after resizing the canvas to repaint the previous signature after the browser auto-clears the canvas.

```javascript
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
signaturePad.redraw(); // repaint the previous signature after the browser auto-clears the canvas
```

--------------------------------

### Append without clearing with fromData()

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Example showing how to append additional point groups without clearing the existing canvas.

```javascript
signaturePad.fromData(additionalGroups, { clear: false });
```

--------------------------------

### velocityFrom method signature

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/point.md

TypeScript signature for velocityFrom, which computes velocity in units/second between start and this point, returning 0 when timestamps are equal.

```typescript
public velocityFrom(start: BasicPoint): number
```

--------------------------------

### Clear during an in-progress stroke

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

JavaScript example showing that clear() is safe to call while drawing; _strokeUpdate() restarts a fresh stroke group.

```js
// clear() while drawing is supported; _strokeUpdate() then restarts a fresh stroke group.
signaturePad.clear();
```

--------------------------------

### Invalid input throws example

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/point.md

Shows that constructing a Point with NaN coordinates throws an Error with message 'Point is invalid: (NaN, 10)'. The try/catch logs the error message.

```javascript
try {
  new Point(NaN, 10);
} catch (err) {
  console.error(err.message); // "Point is invalid: (NaN, 10)"
}
```

--------------------------------

### addEventListener(type, listener, options?)

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-event-target.md

Delegates to the underlying EventTarget.addEventListener. Returns void. Example shows adding an 'endStroke' listener that logs the number of strokes drawn.

```ts
addEventListener(
  type: string,
  listener: EventListenerOrEventListenerObject | null,
  options?: boolean | AddEventListenerOptions,
): void
```

```js
signaturePad.addEventListener('endStroke', () => {
  console.log(signaturePad.toData().length, 'strokes drawn');
});
```

--------------------------------

### removeEventListener(type, callback, options?)

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-event-target.md

Delegates to the underlying EventTarget.removeEventListener. Returns void. Example shows adding and removing an 'endStroke' listener.

```ts
removeEventListener(
  type: string,
  callback: EventListenerOrEventListenerObject | null,
  options?: boolean | EventListenerOptions,
): void
```

```js
const onEnd = () => saveSignature();
signaturePad.addEventListener('endStroke', onEnd);
signaturePad.removeEventListener('endStroke', onEnd);
```

--------------------------------

### Decode data URI signature in C# for ASP.NET

Source: https://github.com/szimek/signature_pad/blob/master/README.md

Decode a data URI encoded signature and write it as a PNG file in C# for ASP.NET. Splits the data URI to get the base64 string, converts it to a byte array, and writes it to signature.png.

```csharp
var dataUri = "data:image/png;base64,iVBORw0K...";
var encodedImage = dataUri.Split(',')[1];
var decodedImage = Convert.FromBase64String(encodedImage);
System.IO.File.WriteAllBytes("signature.png", decodedImage);
```

--------------------------------

### Decode data URI signature in Ruby with Base64

Source: https://github.com/szimek/signature_pad/blob/master/README.md

Decode a data URI encoded signature and write it as a PNG file on the server. Splits the data URI at the comma to get the base64-encoded image data, then decodes it and writes to signature.png.

```ruby
require "base64"

data_uri = "data:image/png;base64,iVBORw0K..."
encoded_image = data_uri.split(",")[1]
decoded_image = Base64.decode64(encoded_image)
File.open("signature.png", "wb") { |f| f.write(decoded_image) }
```

--------------------------------

### Display data URI signature in HTML <img> tag

Source: https://github.com/szimek/signature_pad/blob/master/README.md

Display a data URI encoded signature directly in an HTML img tag. This approach has disadvantages: it is not easy to get image dimensions, you cannot manipulate it (e.g., create a thumbnail), and it has performance issues on mobile devices.

```html
<img src="data:image/png;base64,iVBORw0K..." />
```

--------------------------------

### PointGroup interface for signature data

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/types.md

Represents a group of points captured during a stroke. Extends PointGroupOptions to capture per-group options at stroke start, and includes the recorded points. Used as the wire format for serialization and restoration between toData() and fromData().

```ts
export interface PointGroup extends PointGroupOptions {
  points: BasicPoint[];
}
```

--------------------------------

### dispatchEvent(event)

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-event-target.md

Delegates to the underlying EventTarget.dispatchEvent. Returns false when a cancelable event was canceled by a listener, otherwise true. SignaturePad uses this to abort canceled strokes. Example shows canceling a stroke on beginStroke.

```ts
dispatchEvent(event: Event): boolean
```

```js
signaturePad.addEventListener('beginStroke', (e) => {
  e.preventDefault(); // the stroke will not be drawn
});
```

--------------------------------

### constructor(canvas, options)

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Creates a new SignaturePad instance bound to the given canvas. Accepts optional configuration options for pen color, width, throttle, and more.

```APIDOC
## constructor(canvas, options)

### Description
Creates a new SignaturePad instance on the provided canvas. The canvas 2D context is obtained in the constructor, and the pad is cleared and bound to pointer/mouse/touch input.

### Method
constructor

### Parameters
- **canvas** (HTMLCanvasElement) - Required - The canvas element to draw the signature on.
- **options** (Options) - Optional - Configuration options. See configuration.md for full options table.

### Notes
- If `options.throttle` is truthy, move updates are throttled.
- The canvas 2D context is created with `canvas.getContext('2d', this.canvasContextOptions)`.
- The constructor calls `this.clear()` and `this.on()`.

### Example
```js
const canvas = document.querySelector('canvas');
const signaturePad = new SignaturePad(canvas);
```

### Example with options
```js
const signaturePad = new SignaturePad(canvas, {
  minWidth: 5,
  maxWidth: 10,
  penColor: 'rgb(66, 133, 244)',
  throttle: 16,
  minDistance: 5,
  backgroundColor: 'rgb(255,255,255)',
  canvasContextOptions: { willReadFrequently: true },
});

// Options can be changed at runtime:
signaturePad.minWidth = 5;
signaturePad.penColor = 'red';
```
```

--------------------------------

### SignaturePad Options

Source: https://github.com/szimek/signature_pad/blob/master/README.md

Options that can be set during initialization or runtime to customize signature pad behavior.

```APIDOC
## SignaturePad Options

### Description
Options that can be set during initialization or runtime to customize signature pad behavior.

### Method
N/A (Configuration)

### Endpoint
N/A

### Parameters
#### Options
- **dotSize** (float or function) - Optional - Radius of a single dot. Also the width of the start of a mark.
- **minWidth** (float) - Optional - Minimum width of a line. Defaults to `0.5`.
- **maxWidth** (float) - Optional - Maximum width of a line. Defaults to `2.5`.
- **throttle** (integer) - Optional - Draw the next point at most once per every `x` milliseconds. Set to `0` to turn off throttling. Defaults to `16`.
- **minDistance** (integer) - Optional - Add the next point only if the previous one is farther than `x` pixels. Defaults to `5`.
- **backgroundColor** (string) - Optional - Color used to clear the background. Can be any color format accepted by `context.fillStyle`. Defaults to `"rgba(0,0,0,0)"` (transparent black). Use a non-transparent color e.g. `"rgb(255,255,255)"` (opaque white) if you'd like to save signatures as JPEG images.
- **penColor** (string) - Optional - Color used to draw the lines. Can be any color format accepted by `context.fillStyle`. Defaults to `"black"`.
- **velocityFilterWeight** (float) - Optional - Weight used to modify new velocity based on the previous velocity. Defaults to `0.7`.
- **canvasContextOptions** (CanvasRenderingContext2DSettings) - Optional - Part of the Canvas API, provides the 2D rendering context for the drawing surface of a `canvas` element. It is used for drawing shapes, text, images, and other objects.

### Request Example
```javascript
const signaturePad = new SignaturePad(canvas, {
    minWidth: 5,
    maxWidth: 10,
    penColor: "rgb(66, 133, 244)"
});

// or during runtime:
const signaturePad = new SignaturePad(canvas);
signaturePad.minWidth = 5;
signaturePad.maxWidth = 10;
signaturePad.penColor = "rgb(66, 133, 244)";
```
```

--------------------------------

### constructor()

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-event-target.md

No parameters. Instantiates an EventTarget; if the native EventTarget constructor throws (e.g., iOS 13 and older), falls back to using document as the underlying event target.

```ts
constructor()
```

--------------------------------

### SignaturePad.on()

Source: https://github.com/szimek/signature_pad/blob/master/README.md

Rebinds all event handlers.

```APIDOC
## SignaturePad.on()

### Description
Rebinds all event handlers.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
None.

### Request Example
```javascript
signaturePad.on();
```

### Response
No return value.
```

--------------------------------

### Listen to beginStroke event

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Adds a one-time event listener for the 'beginStroke' event on a SignaturePad instance. The event detail provides x and y coordinates, which are logged to the console. The 'once' option ensures the listener is removed after the first invocation.

```javascript
signaturePad.addEventListener('beginStroke', (e) => {
  console.log('beginStroke at', e.detail.x, e.detail.y);
}, { once: true });
```

--------------------------------

### Scale canvas for high DPI screens with devicePixelRatio

Source: https://github.com/szimek/signature_pad/blob/master/README.md

Scale the canvas by devicePixelRatio to correctly handle high DPI screens and properly display signatures loaded via SignaturePad#fromDataURL. Call signaturePad.clear() inside the resize handler so isEmpty() returns the correct value. Listen for screen orientation change instead of resize on mobile devices, and consider throttling the resize event.

```javascript
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();
```

--------------------------------

### constructor

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-event-target.md

Instantiates an EventTarget, falling back to using document if the native EventTarget constructor throws (e.g., iOS 13 and older).

```APIDOC
## constructor

### Description
Instantiates an EventTarget; if the native EventTarget constructor throws (e.g. iOS 13 and older), falls back to using `document` as the underlying event target.

### Method
constructor

### Signature
```ts
constructor()
```

### Parameters
None.

### Source
`src/signature_event_target.ts:6-15`
```

--------------------------------

### fromData(pointGroups, options?)

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Replays serialized point groups onto the canvas, optionally clearing existing content first.

```APIDOC
## fromData(pointGroups, options?)

### Description
Replays point groups onto the canvas. Internally dispatches to `_drawCurve` (groups with more than 2 points), `_drawLine` (exactly 2 points), or `_drawDot` (1 point, or 0 — `points[0]` access). Appends the serialized groups to the internal data.

### Method
`fromData`

### Signature
```ts
public fromData(
  pointGroups: PointGroup[],
  { clear = true }: FromDataOptions = {},
): void
```

### Parameters
#### Parameters
- **pointGroups** (`PointGroup[]`) - Required - Serialized drawing, as returned by `toData()`.
- **clear** (`boolean`) - Optional, default `true` - Whether to clear the canvas/data first.

### Returns
`void`

### Example — basic load
```js
const data = signaturePad.toData();   // serialized signature
// ... persist data ...
const pad2 = new SignaturePad(otherCanvas);
pad2.fromData(data);
```

### Example — append without clearing
```js
signaturePad.fromData(additionalGroups, { clear: false });
```
```

--------------------------------

### SignaturePad Class

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

The SignaturePad class is the main entry point for creating a signature drawing controller on a canvas. It can be instantiated with a canvas element and optional options.

```APIDOC
## SignaturePad Class

### Description
The SignaturePad class is a canvas-based signature drawing controller that renders variable-width Bézier curves. It exposes serialization, redraw, event, and input-binding APIs. It inherits from SignatureEventTarget, providing event listener methods.

### Constructor

#### `new SignaturePad(canvas, options?)`
- **canvas** (HTMLCanvasElement) - Required - The canvas element to attach the signature pad to.
- **options** (Options) - Optional - Configuration options for the signature pad.

### Import Paths
- ESM: `import SignaturePad from 'signature_pad';`
- UMD: `new SignaturePad(canvas)` via global `SignaturePad` from `dist/signature_pad.umd.js` or `dist/signature_pad.umd.min.js`

### Inherited Methods
- `addEventListener` - Adds an event listener.
- `removeEventListener` - Removes an event listener.
- `dispatchEvent` - Dispatches an event.

### Public Instance Properties
These properties are writable at runtime and serve as the source of truth for drawing options. Assignments take effect on the next stroke.

| Property | Type | Initial Value | Description |
|----------|------|---------------|-------------|
| `dotSize` | `number` | `options.dotSize \|\| 0` | Radius of a dot; also the start width of a mark. `0` means "derive from min/maxWidth". |
| `minWidth` | `number` | `options.minWidth \|\| 0.5` | Minimum width of a stroke. |
| `maxWidth` | `number` | `options.maxWidth \|\| 2.5` | Maximum width of a stroke. |
| `penColor` | `string` | `options.penColor \|\| 'black'` | Color of the pen. |
| `minDistance` | `number` | `options.minDistance ?? 5` | Minimum distance in pixels between points. `??` ensures `0` is honored. |
| `velocityFilterWeight` | `number` | `options.velocityFilterWeight \|\| 0.7` | Weight for velocity filtering. |
| `compositeOperation` | `GlobalCompositeOperation` | `options.compositeOperation \|\| 'source-over'` | Composite operation for drawing. |
| `backgroundColor` | `string` | `options.backgroundColor \|\| 'rgba(0,0,0,0)'` | Background color used by `clear()` to paint the canvas background. |
| `throttle` | `number` | `options.throttle ?? 16` | Throttle time in milliseconds. `??` ensures `0` disables throttling. |
| `canvasContextOptions` | `CanvasRenderingContext2DSettings` | `options.canvasContextOptions ?? {}` | Options passed to `canvas.getContext('2d', ...)`. |
```

--------------------------------

### on()

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Binds input handlers to the canvas, enabling drawing. Called automatically by the constructor.

```APIDOC
## on()

### Description
Binds input handlers to the canvas: sets `touchAction`, `msTouchAction`, `userSelect`, and `webkitUserSelect` styles to `'none'`, then attaches listeners. Pointer events are used when `window.PointerEvent` exists and the platform is not iOS; otherwise mouse events, plus touch events when `'ontouchstart' in window`. Called automatically by the constructor.

### Method
`on`

### Signature
```ts
public on(): void
```

### Parameters
None.

### Returns
`void`

### Example
```js
signaturePad.off();
// ... temporarily allow page panning/zooming over the canvas ...
signaturePad.on();
```
```

--------------------------------

### SignaturePad.fromDataURL()

Source: https://github.com/szimek/signature_pad/blob/master/README.md

Draws signature image from a data URL. This method does not populate internal data structure, so #toData won't work properly after using it.

```APIDOC
## SignaturePad.fromDataURL()

### Description
Draws signature image from a data URL. This method does not populate internal data structure, so #toData won't work properly after using it.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
#### Required Parameters
- **dataUrl** (string) - Required - Data URL of the signature image.

#### Optional Parameters
- **options** (object) - Optional - An object with the following properties:
  - **ratio** (number) - Optional - Ratio for scaling.
  - **width** (number) - Optional - Width of the image.
  - **height** (number) - Optional - Height of the image.
  - **xOffset** (number) - Optional - Horizontal offset.
  - **yOffset** (number) - Optional - Vertical offset.

### Request Example
```javascript
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...", { ratio: 1, width: 400, height: 200, xOffset: 100, yOffset: 50 });
```

### Response
No return value.
```

--------------------------------

### SignaturePad constructor default fallbacks (src/signature_pad.ts:97-120)

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/configuration.md

Default values applied in the SignaturePad constructor for all Options fields. Options using || fall back when the value is 0 or '' (and on explicit undefined); options using ?? (throttle, minDistance, canvasContextOptions) honor 0 and {}.

```typescript
// src/signature_pad.ts:97-120
this.velocityFilterWeight = options.velocityFilterWeight || 0.7;
this.minWidth = options.minWidth || 0.5;
this.maxWidth = options.maxWidth || 2.5;
this.throttle = options.throttle ?? 16;        // 0 is honored
this.minDistance = options.minDistance ?? 5;   // 0 is honored
this.dotSize = options.dotSize || 0;
this.penColor = options.penColor || 'black';
this.backgroundColor = options.backgroundColor || 'rgba(0,0,0,0)';
this.compositeOperation = options.compositeOperation || 'source-over';
this.canvasContextOptions = options.canvasContextOptions ?? {};
```

--------------------------------

### FromDataUrlOptions

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/types.md

Options interface for the fromDataURL() method.

```APIDOC
## FromDataUrlOptions

### Description
Options for the `fromDataURL()` method, controlling dimensions and offsets when drawing an image onto the canvas.

### Type
`interface`

### Fields
- **ratio** (`number`) - Optional - Default: `window.devicePixelRatio || 1` - Used to derive default `width`/`height` from the canvas size.
- **width** (`number`) - Optional - Default: `canvas.width / ratio` - Draw width.
- **height** (`number`) - Optional - Default: `canvas.height / ratio` - Draw height.
- **xOffset** (`number`) - Optional - Default: `0` - Horizontal draw offset.
- **yOffset** (`number`) - Optional - Default: `0` - Vertical draw offset.

### Used By
- `SignaturePad.fromDataURL(dataUrl, options)`
- Also stored for `redraw()` and `toSVG({ includeDataUrl: true })`
```

--------------------------------

### SignaturePad.redraw()

Source: https://github.com/szimek/signature_pad/blob/master/README.md

Redraws the canvas.

```APIDOC
## SignaturePad.redraw()

### Description
Redraws the canvas.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
None.

### Request Example
```javascript
signaturePad.redraw();
```

### Response
No return value.
```

--------------------------------

### Include Signature Pad via script tag

Source: https://github.com/szimek/signature_pad/blob/master/README.md

Add Signature Pad directly to your page via a script tag. Replace [version] with the version you want to use, as noted in the documentation. The library is provided as a UMD module.

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

--------------------------------

### Bezier constructor signature

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/bezier.md

Constructor signature for Bezier, taking startPoint, control2, control1, endPoint, startWidth, and endWidth. Note the order: control2 before control1.

```typescript
constructor(
  public startPoint: Point,
  public control2: BasicPoint,
  public control1: BasicPoint,
  public endPoint: Point,
  public startWidth: number,
  public endWidth: number,
)
```

--------------------------------

### FromDataOptions

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/types.md

Options interface for the fromData() method.

```APIDOC
## FromDataOptions

### Description
Options for the `fromData()` method, controlling whether existing content is cleared before loading new point groups.

### Type
`interface`

### Fields
- **clear** (`boolean`) - Optional - Whether `fromData()` clears existing content first. Default `true`.

### Used By
- `SignaturePad.fromData(pointGroups, options)`
```

--------------------------------

### SignaturePad Events

Source: https://github.com/szimek/signature_pad/blob/master/README.md

Events that can be listened to using addEventListener to react to signature drawing actions.

```APIDOC
## SignaturePad Events

### Description
Events that can be listened to using addEventListener to react to signature drawing actions.

### Method
N/A (Event)

### Endpoint
N/A

### Events
- **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.

### Request Example
```javascript
const signaturePad = new SignaturePad(canvas);
signaturePad.addEventListener("beginStroke", () => {
  console.log("Signature started");
}, { once: true });
```
```

--------------------------------

### toDataURL overload signatures and implementation (TypeScript)

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Shows the two public overload signatures and the implementation of toDataURL. The SVG overload accepts ToSVGOptions, while the raster overload accepts a quality number. The implementation defaults to 'image/png' and handles both cases.

```typescript
public toDataURL(
  type: 'image/svg+xml',
  encoderOptions?: ToSVGOptions,
): string;

public toDataURL(type?: string, encoderOptions?: number): string;

// implementation
public toDataURL(
  type = 'image/png',
  encoderOptions?: number | ToSVGOptions | undefined,
): string
```

--------------------------------

### SignaturePad.toData()

Source: https://github.com/szimek/signature_pad/blob/master/README.md

Returns signature image as an array of point groups.

```APIDOC
## SignaturePad.toData()

### Description
Returns signature image as an array of point groups.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
None.

### Request Example
```javascript
const data = signaturePad.toData();
```

### Response
#### Success Response
Returns an array of point groups representing the signature.
```

--------------------------------

### Constructor TypeScript signature

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

TypeScript signature for the SignaturePad constructor. Takes a canvas element and optional options object. The canvas 2D context is obtained in the constructor.

```ts
constructor(
  private canvas: HTMLCanvasElement,
  options: Options = {},
)
```

--------------------------------

### fromDataURL() basic call

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Basic usage of fromDataURL() to load an image from a data URL.

```javascript
await signaturePad.fromDataURL('data:image/png;base64,iVBORw0K...');
```

--------------------------------

### ToSVGOptions

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/types.md

Options interface for the toSVG() method.

```APIDOC
## ToSVGOptions

### Description
Options for the `toSVG()` method, controlling whether to include a background rectangle and/or embed the data URL image.

### Type
`interface`

### Fields
- **includeBackgroundColor** (`boolean`) - Optional - Default: `false` - Render `backgroundColor` as a background `<rect>`.
- **includeDataUrl** (`boolean`) - Optional - Default: `false` - Embed the `fromDataURL()` image as an `<image>` element.

### Used By
- `SignaturePad.toSVG(options)`
- The `'image/svg+xml'` overload of `SignaturePad.toDataURL(type, encoderOptions)`
```

--------------------------------

### fromDataURL(dataUrl, options)

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Draws an image onto the canvas from a data URL. Resolves when the image loads and rejects on error.

```APIDOC
## fromDataURL(dataUrl, options)

### Description
Draws an image onto the canvas from a data URL via `ctx.drawImage(image, xOffset, yOffset, width, height)`. The image is loaded with `crossOrigin = 'anonymous'`. Resolves when the image loads; rejects with the image's error when it fails to load. Sets `_isEmpty = false` and stores the data URL (with a copy of `options`) so `redraw()` and `toSVG({ includeDataUrl: true })` can reuse it.

### Method
`fromDataURL(dataUrl, options)`

### Signature
```ts
public fromDataURL(
  dataUrl: string,
  options: FromDataUrlOptions = {},
): Promise<void>
```

### Parameters
| Parameter | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| `dataUrl` | `string` | yes | — | Data URL of the image to draw. |
| `options.ratio` | `number` | no | `window.devicePixelRatio \|\| 1` | Divides the canvas size to compute default `width`/`height`. |
| `options.width` | `number` | no | `this.canvas.width / ratio` | Draw width in CSS pixels. |
| `options.height` | `number` | no | `this.canvas.height / ratio` | Draw height in CSS pixels. |
| `options.xOffset` | `number` | no | `0` | Horizontal offset. |
| `options.yOffset` | `number` | no | `0` | Vertical offset. |

### Returns
`Promise<void>` — Resolves when the image loads; rejects with the image's error when it fails to load.

### Throws/Rejects
The returned promise rejects with whatever the `Image` element's `onerror` handler receives (typically an `Error` or `Event`) if the data URL cannot be decoded/loaded.

### Notes
`fromDataURL` does **not** populate the internal point-group structure, so after using it, `toData()` will not reflect the image content.

### Example — basic call
```js
await signaturePad.fromDataURL('data:image/png;base64,iVBORw0K...');
```

### Example — scaled with offsets and error handling
```js
try {
  await signaturePad.fromDataURL(dataUrl, {
    ratio: 1,
    width: 400,
    height: 200,
    xOffset: 100,
    yOffset: 50,
  });
} catch (err) {
  console.error('Image could not be loaded:', err);
}
```
```

--------------------------------

### SignaturePad.toDataURL()

Source: https://github.com/szimek/signature_pad/blob/master/README.md

Returns signature image as a data URL. Can be used to save the signature as PNG, JPEG, or SVG data URL.

```APIDOC
## SignaturePad.toDataURL()

### Description
Returns signature image as a data URL. Can be used to save the signature as PNG, JPEG, or SVG data URL.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
#### Optional Parameters
- **type** (string) - Optional - MIME type for the image format (e.g., "image/png", "image/jpeg", "image/svg+xml").
- **encoderOptions** (number) - Optional - Image quality for JPEG (e.g., 0.5).

### Request Example
```javascript
signaturePad.toDataURL(); // save image as PNG
signaturePad.toDataURL("image/jpeg"); // save image as JPEG
signaturePad.toDataURL("image/jpeg", 0.5); // save image as JPEG with 0.5 image quality
signaturePad.toDataURL("image/svg+xml"); // save image as SVG data url
```

### Response
#### Success Response
Returns a data URL string representing the signature image.

#### Response Example
```
"data:image/png;base64,..."
```
```

--------------------------------

### SignaturePad.isEmpty()

Source: https://github.com/szimek/signature_pad/blob/master/README.md

Returns true if canvas is empty, otherwise returns false.

```APIDOC
## SignaturePad.isEmpty()

### Description
Returns true if canvas is empty, otherwise returns false.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
None.

### Request Example
```javascript
signaturePad.isEmpty();
```

### Response
#### Success Response
Returns a boolean indicating whether the canvas is empty.
```

--------------------------------

### SignaturePad.fromData()

Source: https://github.com/szimek/signature_pad/blob/master/README.md

Draws signature image from an array of point groups. Optionally clears existing image before drawing.

```APIDOC
## SignaturePad.fromData()

### Description
Draws signature image from an array of point groups. Optionally clears existing image before drawing.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
#### Required Parameters
- **data** (array) - Required - Array of point groups.

#### Optional Parameters
- **options** (object) - Optional - An object with the following properties:
  - **clear** (boolean) - Optional - If false, does not clear existing image. Defaults to true.

### Request Example
```javascript
signaturePad.fromData(data);
signaturePad.fromData(data, { clear: false });
```

### Response
No return value.
```

--------------------------------

### SignaturePad.toSVG()

Source: https://github.com/szimek/signature_pad/blob/master/README.md

Returns the signature as an SVG string. Optionally includes background color or data URL in the SVG output.

```APIDOC
## SignaturePad.toSVG()

### Description
Returns the signature as an SVG string. Optionally includes background color or data URL in the SVG output.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
#### Optional Parameters
- **options** (object) - Optional - An object with the following properties:
  - **includeBackgroundColor** (boolean) - Optional - If true, adds background color to SVG output.
  - **includeDataUrl** (boolean) - Optional - If true, adds data URL (from fromDataURL) to SVG output background.

### Request Example
```javascript
signaturePad.toSVG(); // "<svg...</svg>"
signaturePad.toSVG({includeBackgroundColor: true}); // add background color to svg output
signaturePad.toSVG({includeDataUrl: true}); // add data url added with fromDataUrl to svg output background
```

### Response
#### Success Response
Returns an SVG string.

#### Response Example
```
"<svg...</svg>"
```
```

--------------------------------

### fromData() method signature

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

TypeScript signature for the fromData() method. Replays point groups onto the canvas.

```typescript
public fromData(
  pointGroups: PointGroup[],
  { clear = true }: FromDataOptions = {},
): void
```

--------------------------------

### SignaturePad.clear()

Source: https://github.com/szimek/signature_pad/blob/master/README.md

Clears the canvas.

```APIDOC
## SignaturePad.clear()

### Description
Clears the canvas.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
None.

### Request Example
```javascript
signaturePad.clear();
```

### Response
No return value.
```

--------------------------------

### on() method signature

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

TypeScript signature for the on() method. It binds input handlers to the canvas, setting styles and attaching listeners. Called automatically by the constructor.

```typescript
public on(): void
```

--------------------------------

### Point constructor signature

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/point.md

TypeScript signature for the Point constructor. Accepts x and y coordinates (coerced with unary +), optional pressure (default 0), and optional time (default Date.now()). Throws an Error if x or y is NaN.

```typescript
constructor(x: number, y: number, pressure?: number, time?: number)
```

--------------------------------

### SignaturePad Events

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Events emitted by SignaturePad via SignatureEventTarget. Each event's detail is a SignatureEvent with properties event, type, x, y, and pressure.

```APIDOC
## SignaturePad Events

### Description
SignaturePad dispatches CustomEvents on itself (via SignatureEventTarget). Each event's detail is a SignatureEvent ({ event, type, x, y, pressure }).

### Events

#### beginStroke
- **Phase**: before a stroke starts
- **Cancelable**: yes — calling preventDefault() cancels the stroke start (_strokeBegin returns early)
- **Source**: src/signature_pad.ts:519-525

#### beforeUpdateStroke
- **Phase**: before each _strokeUpdate
- **Cancelable**: no
- **Source**: src/signature_pad.ts:586

#### afterUpdateStroke
- **Phase**: after each _strokeUpdate
- **Cancelable**: no
- **Source**: src/signature_pad.ts:617

#### endStroke
- **Phase**: after a stroke ends
- **Cancelable**: no
- **Source**: src/signature_pad.ts:633

### Listening Example
```js
signaturePad.addEventListener('beginStroke', (e) => {
  console.log('beginStroke at', e.detail.x, e.detail.y);
}, { once: true });
```

```

--------------------------------

### Catch fromDataURL rejection on image load failure

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/errors.md

Catches the rejection from SignaturePad.fromDataURL when the data URL cannot be loaded by new Image(). The rejection reason is the raw onerror argument (typically Event or Error, browser-dependent). Cross-origin images without CORS headers will also reject because image.crossOrigin is set to 'anonymous'.

```javascript
try {
  await signaturePad.fromDataURL('data:image/png;base64,iVBORw0K...');
} catch (err) {
  console.error('Failed to load image data URL:', err);
}
```

--------------------------------

### SignaturePad class declaration

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

The class declaration for SignaturePad, which extends SignatureEventTarget. This is the default export of the package.

```typescript
export default class SignaturePad extends SignatureEventTarget
```

--------------------------------

### redraw()

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Clears the pad and replays the last data URL and internal point groups. Use after the browser clears the canvas on resize.

```APIDOC
## redraw()

### Description
Clears the pad, then replays, in order: the last data-URL set by `fromDataURL()` (if any) and the internal point groups. Use this after the browser clears a canvas on resize. Returns `void`.

### Method
`redraw()`

### Signature
```ts
public redraw(): void
```

### Parameters
None.

### Returns
`void`

### Example
```js
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
signaturePad.redraw(); // repaint the previous signature after the browser auto-clears the canvas
```

### Example — redraw after a data URL was loaded
```js
await signaturePad.fromDataURL('data:image/png;base64,iVBORw0K...');
signaturePad.clear();
signaturePad.redraw(); // data URL + point groups are restored
```
```

--------------------------------

### equals method signature

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/point.md

TypeScript signature for equals, which returns true if all four fields (x, y, pressure, time) are strictly equal to another BasicPoint.

```typescript
public equals(other: BasicPoint): boolean
```

--------------------------------

### fromDataURL() TypeScript signature

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

Public method signature for fromDataURL(). Draws an image from a data URL onto the canvas. Returns a Promise that resolves when the image loads and rejects on error.

```typescript
public fromDataURL(
  dataUrl: string,
  options: FromDataUrlOptions = {},
): Promise<void>
```

--------------------------------

### isEmpty() method signature

Source: https://github.com/szimek/signature_pad/blob/master/_autodocs/api-reference/signature-pad.md

TypeScript signature for the isEmpty() method. Returns true if no stroke rendering has happened.

```typescript
public isEmpty(): boolean
```
Tokens:
Raw