### Build Example Project

Source: https://github.com/michaeldzjap/react-signature-pad-wrapper/blob/master/README.md

Instructions to build the example project included with this package. This involves installing dependencies and running build commands.

```bash
npm install
cd example && npm install && npm run build
```

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

### Install react-signature-pad-wrapper

Source: https://github.com/michaeldzjap/react-signature-pad-wrapper/blob/master/README.md

Install the package using npm. This is the first step to using the component in your React project.

```bash
npm install --save react-signature-pad-wrapper
```

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

### Export and Import Raw Point Data with toData() and fromData()

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Use `toData()` to get signature data as an array of `PointGroup` objects for compact, lossless serialization. Use `fromData()` to restore a signature from this format. Persist this data to localStorage or other storage mechanisms.

```tsx
import type { PointGroup } from 'signature_pad';

const padRef = useRef<SignaturePad>(null);

// Export raw point data
const pointData: PointGroup[] = padRef.current?.toData() ?? [];
// => [{ dotSize: 0, maxWidth: 2.5, minWidth: 0.5, penColor: 'black',
//       points: [{ x: 120, y: 80, pressure: 0.5, time: 1641476147709 }] }]

// Persist to localStorage
localStorage.setItem('signature', JSON.stringify(pointData));

// Restore from localStorage
const restored: PointGroup[] = JSON.parse(localStorage.getItem('signature') ?? '[]');
padRef.current?.fromData(restored);

console.log('isEmpty after restore:', padRef.current?.isEmpty());
// => isEmpty after restore: false (if data was non-empty)
```

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

### Initialize SignaturePad with Options

Source: https://github.com/michaeldzjap/react-signature-pad-wrapper/blob/master/README.md

Pass initialization options as a component property when rendering the SignaturePad. These options are passed directly to the underlying signature_pad instance.

```javascript
render() {
  return <SignaturePad options={{minWidth: 5, maxWidth: 10, penColor: 'rgb(66, 133, 244)'}} />;
}
```

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

### Access SignaturePad Instance Methods and Properties

Source: https://github.com/michaeldzjap/react-signature-pad-wrapper/blob/master/README.md

Use a ref to access the SignaturePad instance at runtime. This allows you to call instance methods like `clear()` and `isEmpty()`, or get/set properties like `minWidth`, `maxWidth`, and `penColor`.

```javascript
render() {
  return <SignaturePad ref={this.signaturePadRef} />;
}

// Call an instance method
this.signaturePad.clear();
this.signaturePad.isEmpty();

// Get/set an object property
this.signaturePad.minWidth = 5;
this.signaturePad.maxWidth = 10;
this.signaturePad.penColor = 'rgb(66, 133, 244)';
```

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

### Configure Responsive Signature Pad

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Create a responsive canvas that fills its container and redraws on resize. Use `redrawOnResize` and `debounceInterval` for custom resize handling.

```tsx
import SignaturePad from 'react-signature-pad-wrapper';

// Responsive canvas — fills container, redraws on resize
function ResponsiveSignaturePad() {
  return (
    <div style={{ width: '100%' }}>
      <SignaturePad redrawOnResize debounceInterval={200} />
    </div>
  );
}
```

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

### Configure Fixed-Size Signature Pad

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Use the `width` and `height` props to create a fixed-size canvas. This disables responsive behavior. Configure `signature_pad` options and canvas element props as needed.

```tsx
import SignaturePad from 'react-signature-pad-wrapper';

// Fixed-size canvas — no responsive behavior
function FixedSignaturePad() {
  return (
    <SignaturePad
      width={500}
      height={200}
      options={{
        minWidth: 1,
        maxWidth: 4,
        penColor: 'rgb(0, 0, 0)',
        backgroundColor: 'rgb(255, 255, 255)',
      }}
      canvasProps={{ className: 'signature-canvas', style: { border: '1px solid #ccc' } }}
    />
  );
}
```

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

### Configure Fixed Size Canvas

Source: https://github.com/michaeldzjap/react-signature-pad-wrapper/blob/master/README.md

Set a fixed width and height for the canvas by passing `width` and `height` properties to the SignaturePad component. This is useful when responsiveness is not required.

```javascript
render() {
  return <SignaturePad width={500} height={500} />;
}
```

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

### toData() / fromData()

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Export and import raw point data for signatures. `toData()` serializes the signature into an array of `PointGroup` objects, and `fromData()` restores a signature from this format. This is the most compact and lossless serialization method.

```APIDOC
## `toData()` / `fromData()` — Export and Import Raw Point Data

`toData()` returns the signature as an array of `PointGroup` objects; `fromData()` restores a signature from the same format. This is the most compact and lossless serialization format.

```tsx
import type { PointGroup } from 'signature_pad';

const padRef = useRef<SignaturePad>(null);

// Export raw point data
const pointData: PointGroup[] = padRef.current?.toData() ?? [];
// => [{ dotSize: 0, maxWidth: 2.5, minWidth: 0.5, penColor: 'black',
//       points: [{ x: 120, y: 80, pressure: 0.5, time: 1641476147709 }] }]

// Persist to localStorage
localStorage.setItem('signature', JSON.stringify(pointData));

// Restore from localStorage
const restored: PointGroup[] = JSON.parse(localStorage.getItem('signature') ?? '[]');
padRef.current?.fromData(restored);

console.log('isEmpty after restore:', padRef.current?.isEmpty());
// => isEmpty after restore: false (if data was non-empty)
```
```

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

### Import SignaturePad Component

Source: https://github.com/michaeldzjap/react-signature-pad-wrapper/blob/master/README.md

Import the SignaturePad component into your React application using ES6 syntax.

```javascript
import SignaturePad from 'react-signature-pad-wrapper';
```

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

### Access Signature Pad Methods via Ref

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Use a React ref to imperatively access the `SignaturePad` component's methods, such as `isEmpty()` and `toDataURL()`. Ensure the ref is correctly attached and the component is mounted before accessing its methods.

```tsx
import { useRef } from 'react';
import SignaturePad from 'react-signature-pad-wrapper';

function SignatureForm() {
  const padRef = useRef<SignaturePad>(null);

  const handleSubmit = () => {
    if (!padRef.current) return;

    if (padRef.current.isEmpty()) {
      alert('Please provide a signature before submitting.');
      return;
    }

    const dataURL = padRef.current.toDataURL('image/png');
    console.log('Signature PNG data URL:', dataURL.substring(0, 60) + '...');
    // => "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..."
  };

  return (
    <>
      <SignaturePad ref={padRef} redrawOnResize />
      <button onClick={handleSubmit}>Submit</button>
    </>
  );
}
```

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

### fromDataURL()

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Load a signature from a data URL (PNG, JPEG, etc.) back onto the canvas.

```APIDOC
## `fromDataURL()` — Load a Signature from a Data URL

Renders an existing signature image (PNG, JPEG, etc.) back onto the canvas.

### Usage Examples
```tsx
const padRef = useRef<SignaturePad>(null);

// Load a previously saved PNG signature
padRef.current?.fromDataURL('data:image/png;base64,iVBORw0KGgo...');

// Load with explicit dimensions (useful for HiDPI canvases)
padRef.current?.fromDataURL('data:image/png;base64,iVBORw0KGgo...', {
  width: 400,
  height: 200,
});

console.log('isEmpty after load:', padRef.current?.isEmpty());
```
```

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

### Access Underlying signature_pad Instance

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Access the raw `signature_pad` instance via the `instance` getter on the ref. This allows for direct use of `signature_pad`'s event listeners and APIs not exposed by the wrapper component.

```tsx
import { useRef, useEffect } from 'react';
import SignaturePad from 'react-signature-pad-wrapper';

function TrackingSignaturePad() {
  const padRef = useRef<SignaturePad>(null);

  useEffect(() => {
    const pad = padRef.current;
    if (!pad) return;

    const handleBegin = () => console.log('Stroke started');
    const handleEnd   = () => console.log('Stroke ended');

    // Access native signature_pad events via .instance
    pad.instance.addEventListener('beginStroke', handleBegin);
    pad.instance.addEventListener('endStroke',   handleEnd);

    return () => {
      pad.instance.removeEventListener('beginStroke', handleBegin);
      pad.instance.removeEventListener('endStroke',   handleEnd);
    };
  }, []);

  return <SignaturePad ref={padRef} />;
}
```

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

### Load Signature from Data URL

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Use `fromDataURL()` to render an existing signature image (PNG, JPEG, etc.) back onto the canvas. You can optionally specify dimensions, which is useful for HiDPI canvases.

```typescript
const padRef = useRef<SignaturePad>(null);

// Load a previously saved PNG signature
padRef.current?.fromDataURL('data:image/png;base64,iVBORw0KGgo...');

// Load with explicit dimensions (useful for HiDPI canvases)
padRef.current?.fromDataURL('data:image/png;base64,iVBORw0KGgo...', {
  width: 400,
  height: 200,
});

console.log('isEmpty after load:', padRef.current?.isEmpty());
// => isEmpty after load: false
```

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

### Full Signature Capture Form Component

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

This component demonstrates initialization, event handling, validation, and export of signature data. It uses `useRef` for imperative access to the SignaturePad instance and manages the drawing state with `useState`.

```tsx
import { useRef, useEffect, useCallback, useState } from 'react';
import SignaturePad from 'react-signature-pad-wrapper';
import type { PointGroup } from 'signature_pad';

export default function SignatureCapture() {
  const padRef  = useRef<SignaturePad>(null);
  const [dirty, setDirty] = useState(false);
  const [saved, setSaved] = useState<string | null>(null);

  // Track whether any strokes have been drawn
  useEffect(() => {
    const pad = padRef.current;
    if (!pad) return;
    const onBegin = () => setDirty(true);
    pad.instance.addEventListener('beginStroke', onBegin);
    return () => pad.instance.removeEventListener('beginStroke', onBegin);
  }, []);

  const handleClear = useCallback(() => {
    padRef.current?.clear();
    setDirty(false);
    setSaved(null);
  }, []);

  const handleSave = useCallback(() => {
    const pad = padRef.current;
    if (!pad || pad.isEmpty()) {
      alert('Please sign before saving.');
      return;
    }

    // Export PNG data URL for display / upload
    const dataURL = pad.toDataURL('image/png');
    setSaved(dataURL);

    // Export raw point data for lossless storage
    const points: PointGroup[] = pad.toData();
    localStorage.setItem('savedSignature', JSON.stringify(points));

    console.log('Saved signature, stroke groups:', points.length);
  }, []);

  const handleLoad = useCallback(() => {
    const raw = localStorage.getItem('savedSignature');
    if (!raw) return;
    const points: PointGroup[] = JSON.parse(raw);
    padRef.current?.fromData(points);
    setDirty(true);
  }, []);

  return (
    <div style={{ maxWidth: 500, margin: '0 auto' }}>
      <h2>Please Sign Below</h2>

      {/* Responsive pad that preserves content on window resize */}
      <div style={{ border: '1px solid #ccc', borderRadius: 4 }}>
        <SignaturePad
          ref={padRef}
          redrawOnResize
          debounceInterval={150}
          options={{ penColor: 'black', minWidth: 1, maxWidth: 3 }}
        />
      </div>

      <div style={{ marginTop: 8, display: 'flex', gap: 8 }}>
        <button onClick={handleClear} disabled={!dirty}>Clear</button>
        <button onClick={handleSave}  disabled={!dirty}>Save</button>
        <button onClick={handleLoad}>Load Saved</button>
      </div>

      {saved && (
        <div style={{ marginTop: 16 }}>
          <p>Saved signature preview:</p>
          <img src={saved} alt="Saved signature" style={{ border: '1px solid #eee' }} />
        </div>
      )}
    </div>
  );
}
```

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

### Runtime Style Properties

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Customize pen and canvas appearance properties at runtime. These properties can be read and set directly via the ref without requiring a re-render.

```APIDOC
## Runtime Style Properties

Pen and canvas appearance properties can be read and set at any time via the ref, without re-rendering.

```tsx
const padRef = useRef<SignaturePad>(null);

// Read current values
console.log(padRef.current?.penColor);           // => "black"
console.log(padRef.current?.minWidth);           // => 0.5
console.log(padRef.current?.maxWidth);           // => 2.5
console.log(padRef.current?.dotSize);            // => 0
console.log(padRef.current?.throttle);           // => 16
console.log(padRef.current?.backgroundColor);    // => "rgba(0,0,0,0)"
console.log(padRef.current?.velocityFilterWeight); // => 0.7

// Set new values at runtime
if (padRef.current) {
  padRef.current.penColor           = 'rgb(66, 133, 244)';
  padRef.current.minWidth           = 1;
  padRef.current.maxWidth           = 5;
  padRef.current.dotSize            = 3;
  padRef.current.throttle           = 20;
  padRef.current.backgroundColor    = 'rgba(255,255,255,1)';
  padRef.current.velocityFilterWeight = 0.8;
}
```
```

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

### Enable Responsive Canvas

Source: https://github.com/michaeldzjap/react-signature-pad-wrapper/blob/master/README.md

To make the canvas responsive, omit the `width` and `height` properties. The canvas will automatically adjust its size on window resize. Note that changing canvas dimensions erases content.

```javascript
render() {
  return <SignaturePad />;
}
```

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

### isEmpty()

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Check if the canvas is empty, meaning no signature strokes have been drawn or the pad has been cleared.

```APIDOC
## `isEmpty()` — Check if the Canvas is Empty

Returns `true` when no signature strokes have been drawn or the pad has been cleared.

### Usage Example
```tsx
const padRef = useRef<SignaturePad>(null);

const validate = () => {
  if (padRef.current?.isEmpty()) {
    console.log('No signature present');
  } else {
    console.log('Signature detected');
  }
};
```
```

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

### toDataURL()

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Export the current canvas content as a base64 data URL. Defaults to PNG format.

```APIDOC
## `toDataURL()` — Export Signature as a Data URL (PNG / JPEG / WebP)

Encodes the current canvas content as a base64 data URL. Defaults to `image/png`.

### Usage Examples
```tsx
const padRef = useRef<SignaturePad>(null);

// Export as PNG (default)
const exportPNG  = () => padRef.current?.toDataURL();
// => "data:image/png;base64,iVBORw0KGgo..."

// Export as JPEG with quality setting
const exportJPEG = () => padRef.current?.toDataURL('image/jpeg', 0.9);
// => "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQA..."

// Export as WebP
const exportWebP = () => padRef.current?.toDataURL('image/webp');
// => "data:image/webp;base64,UklGRl..."

// Upload to a server
const uploadSignature = async () => {
  const dataURL = padRef.current?.toDataURL() ?? '';
  await fetch('/api/signatures', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ signature: dataURL }),
  });
};
```
```

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

### toSVG()

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Export the signature as a raw SVG markup string, ideal for server-side storage or further DOM manipulation.

```APIDOC
## `toSVG()` — Export Signature as a Raw SVG String

Returns the signature as a raw SVG markup string (not base64-encoded), ideal for server-side storage or further DOM manipulation.

### Usage Examples
```tsx
const padRef = useRef<SignaturePad>(null);

const svgString = padRef.current?.toSVG();
// => '<svg xmlns="http://www.w3.org/2000/svg" ...<path .../></svg>'

// Save as an .svg file
const downloadSVG = () => {
  const svg  = padRef.current?.toSVG() ?? '';
  const blob = new Blob([svg], { type: 'image/svg+xml' });
  const url  = URL.createObjectURL(blob);
  const a    = document.createElement('a');
  a.href     = url;
  a.download = 'signature.svg';
  a.click();
  URL.revokeObjectURL(url);
};
```
```

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

### on() / off()

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Enable and disable drawing on the canvas. This is useful for read-only signature display or for implementing step-by-step form flows where drawing should be temporarily restricted.

```APIDOC
## `on()` / `off()` — Enable and Disable Drawing

Toggle whether the user can draw on the canvas. Useful for read-only signature display or step-by-step form flows.

```tsx
const padRef = useRef<SignaturePad>(null);

// Disable drawing (e.g., after submission)
padRef.current?.off();

// Re-enable drawing (e.g., on "Edit" button click)
padRef.current?.on();
```
```

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

### clear()

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Erase all drawn content and reset the canvas to its background color.

```APIDOC
## `clear()` — Clear the Canvas

Erases all drawn content and resets the canvas to the background color.

### Usage Example
```tsx
const padRef = useRef<SignaturePad>(null);

const handleClear = () => {
  padRef.current?.clear();
  console.log('isEmpty after clear:', padRef.current?.isEmpty());
};
```
```

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

### Runtime Style Property Manipulation

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Read and set pen and canvas appearance properties directly via the ref at runtime without re-rendering. This allows for dynamic styling changes.

```typescript
const padRef = useRef<SignaturePad>(null);

// Read current values
console.log(padRef.current?.penColor);           // => "black"
console.log(padRef.current?.minWidth);           // => 0.5
console.log(padRef.current?.maxWidth);           // => 2.5
console.log(padRef.current?.dotSize);            // => 0
console.log(padRef.current?.throttle);           // => 16
console.log(padRef.current?.backgroundColor);    // => "rgba(0,0,0,0)"
console.log(padRef.current?.velocityFilterWeight); // => 0.7

// Set new values at runtime
if (padRef.current) {
  padRef.current.penColor           = 'rgb(66, 133, 244)';
  padRef.current.minWidth           = 1;
  padRef.current.maxWidth           = 5;
  padRef.current.dotSize            = 3;
  padRef.current.throttle           = 20;
  padRef.current.backgroundColor    = 'rgba(255,255,255,1)';
  padRef.current.velocityFilterWeight = 0.8;
}
```

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

### toSvgDataUrl()

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Export the signature as a base64-encoded SVG data URL, suitable for use in `<img>` tags.

```APIDOC
## `toSvgDataUrl()` — Export Signature as an SVG Data URL

Returns the signature as a base64-encoded SVG data URL, suitable for use in `<img src>` attributes.

### Usage Examples
```tsx
const padRef = useRef<SignaturePad>(null);

const svgDataUrl = padRef.current?.toSvgDataUrl({ includeDataUrl: true });
// => "data:image/svg+xml;base64,PHN2ZyB4bWxu..."

// Use directly in an <img> tag
const PreviewSVG = () => (
  <img
    src={padRef.current?.toSvgDataUrl({ includeDataUrl: true })}
    alt="Saved signature"
  />
);
```
```

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

### Enable and Disable Drawing with on() and off()

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Toggle drawing on the canvas using `off()` to disable and `on()` to re-enable. This is useful for read-only display or controlling user interaction in multi-step forms.

```typescript
const padRef = useRef<SignaturePad>(null);

// Disable drawing (e.g., after submission)
padRef.current?.off();

// Re-enable drawing (e.g., on "Edit" button click)
padRef.current?.on();
```

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

### Export Signature as Data URL

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

The `toDataURL()` method exports the current canvas content as a base64 encoded data URL. It defaults to `image/png` but can be configured for `image/jpeg` or `image/webp` with quality options.

```typescript
const padRef = useRef<SignaturePad>(null);

const exportPNG  = () => padRef.current?.toDataURL();
// => "data:image/png;base64,iVBORw0KGgo..."

const exportJPEG = () => padRef.current?.toDataURL('image/jpeg', 0.9);
// => "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQA..."

const exportWebP = () => padRef.current?.toDataURL('image/webp');
// => "data:image/webp;base64,UklGRl..."

// Upload to a server
const uploadSignature = async () => {
  const dataURL = padRef.current?.toDataURL() ?? '';
  await fetch('/api/signatures', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ signature: dataURL }),
  });
};
```

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

### Check if Canvas is Empty

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

The `isEmpty()` method returns `true` if no signature strokes have been drawn or if the pad has been cleared. This is useful for validation before saving or processing a signature.

```typescript
const padRef = useRef<SignaturePad>(null);

const validate = () => {
  if (padRef.current?.isEmpty()) {
    console.log('No signature present');
    // => "No signature present"
  } else {
    console.log('Signature detected');
  }
};
```

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

### Export Signature as Raw SVG String

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

The `toSVG()` method provides the signature as a raw SVG markup string, not base64-encoded. This is ideal for server-side storage or further manipulation within the DOM.

```typescript
const padRef = useRef<SignaturePad>(null);

const svgString = padRef.current?.toSVG();
// => '<svg xmlns="http://www.w3.org/2000/svg" ...<path .../></svg>'

// Save as an .svg file
const downloadSVG = () => {
  const svg  = padRef.current?.toSVG() ?? '';
  const blob = new Blob([svg], { type: 'image/svg+xml' });
  const url  = URL.createObjectURL(blob);
  const a    = document.createElement('a');
  a.href     = url;
  a.download = 'signature.svg';
  a.click();
  URL.revokeObjectURL(url);
};
```

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

### Export Signature as SVG Data URL

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

The `toSvgDataUrl()` method returns the signature as a base64-encoded SVG data URL. This format is suitable for direct use in `<img>` tags or other contexts requiring a data URI.

```typescript
const padRef = useRef<SignaturePad>(null);

const svgDataUrl = padRef.current?.toSvgDataUrl({ includeDataUrl: true });
// => "data:image/svg+xml;base64,PHN2ZyB4bWxu..."

// Use directly in an <img> tag
const PreviewSVG = () => (
  <img
    src={padRef.current?.toSvgDataUrl({ includeDataUrl: true })}
    alt="Saved signature"
  />
);
```

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

### canvas

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Access the underlying HTML canvas element for direct manipulation.

```APIDOC
## `canvas` — Access the Underlying HTML Canvas Element

The `canvas` getter returns the `React.RefObject<HTMLCanvasElement>` for direct canvas manipulation.

### Usage Example
```tsx
import { useRef } from 'react';
import SignaturePad from 'react-signature-pad-wrapper';

function CanvasAccessExample() {
  const padRef = useRef<SignaturePad>(null);

  const addWatermark = () => {
    const canvasEl = padRef.current?.canvas.current;
    if (!canvasEl) return;

    const ctx = canvasEl.getContext('2d');
    if (!ctx) return;

    ctx.font = '14px Arial';
    ctx.fillStyle = 'rgba(180,180,180,0.5)';
    ctx.fillText('SAMPLE', 10, canvasEl.height - 10);
  };

  return (
    <>
      <SignaturePad ref={padRef} width={400} height={200} />
      <button onClick={addWatermark}>Add Watermark</button>
    </>
  );
}
```
```

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

### Access Underlying HTML Canvas Element

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Use the `canvas` getter to obtain a ref to the `HTMLCanvasElement` for direct manipulation. Ensure the ref is correctly attached to the SignaturePad component.

```tsx
import { useRef } from 'react';
import SignaturePad from 'react-signature-pad-wrapper';

function CanvasAccessExample() {
  const padRef = useRef<SignaturePad>(null);

  const addWatermark = () => {
    const canvasEl = padRef.current?.canvas.current;
    if (!canvasEl) return;

    const ctx = canvasEl.getContext('2d');
    if (!ctx) return;

    ctx.font = '14px Arial';
    ctx.fillStyle = 'rgba(180,180,180,0.5)';
    ctx.fillText('SAMPLE', 10, canvasEl.height - 10);
  };

  return (
    <>
      <SignaturePad ref={padRef} width={400} height={200} />
      <button onClick={addWatermark}>Add Watermark</button>
    </>
  );
}
```

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

### Enable Redraw on Resize

Source: https://github.com/michaeldzjap/react-signature-pad-wrapper/blob/master/README.md

To preserve the canvas content when resizing, set the `redrawOnResize` property to `true`. This saves the current drawing to a base64 string and reloads it after resizing. Be aware that repeated saving/loading can degrade quality.

```javascript
render() {
  return <SignaturePad redrawOnResize />;
}
```

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

### redraw()

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Re-render all existing stroke data onto the canvas. Useful after programmatic canvas manipulation.

```APIDOC
## `redraw()` — Redraw the Signature

Re-renders all existing stroke data onto the canvas. Useful after programmatic canvas manipulation.

### Usage Example
```tsx
const padRef = useRef<SignaturePad>(null);

const handleRedraw = () => {
  padRef.current?.redraw();
};
```
```

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

### Redraw the Signature

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Use the `redraw()` method to re-render all existing stroke data onto the canvas. This is particularly useful after performing programmatic manipulations on the canvas context.

```typescript
const padRef = useRef<SignaturePad>(null);

const handleRedraw = () => {
  padRef.current?.redraw();
};
```

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

### Clear the Canvas

Source: https://context7.com/michaeldzjap/react-signature-pad-wrapper/llms.txt

Call the `clear()` method to erase all drawn content and reset the canvas to its background color. This operation also sets the pad to an empty state.

```typescript
const padRef = useRef<SignaturePad>(null);

const handleClear = () => {
  padRef.current?.clear();
  console.log('isEmpty after clear:', padRef.current?.isEmpty());
  // => isEmpty after clear: true
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.