Skip to main content

Handwritten Signature

Ydesign's canvas doesn't support freehand drawing directly on itself (keeping with its "layout tool" identity). Instead, capture the signature in a separate drawing widget and add the result to the canvas as an Image element.

Using react-signature-canvas​

react-signature-canvas is a lightweight React signature pad.

npm install react-signature-canvas

Custom side panel​

import { useRef } from 'react';
import SignatureCanvas from 'react-signature-canvas';
import { Button } from 'antd';
import { observer } from 'mobx-react-lite';
import { Pen } from 'lucide-react';
import {
  SectionTab,
  DEFAULT_SECTIONS,
  SidePanel,
} from '@ydesign/react-editor/side-panel';
import type { Section } from '@ydesign/react-editor/side-panel';

const SignatureSection: Section = {
  name: 'signature',
  Tab: observer(props => (
    <SectionTab name="Signature" {...props}>
      <Pen size={20} />
    </SectionTab>
  )),
  Panel: observer(({ store }) => {
    const padRef = useRef<SignatureCanvas>(null);

    const handleClear = () => padRef.current?.clear();

    const handleAddToCanvas = () => {
      const pad = padRef.current;
      if (!pad || pad.isEmpty()) return;

      // Export a transparent PNG dataURL
      const dataUrl = pad.getTrimmedCanvas().toDataURL('image/png');

      store.addElement({
        type: 'Image',
        src: dataUrl,
        left: store.width / 2 - 150,
        top: store.height / 2 - 40,
        width: 300,
        height: 80,
      });

      pad.clear();
    };

    return (
      <div style={{ padding: 12 }}>
        <p style={{ marginBottom: 8 }}>Sign below:</p>

        <div style={{ border: '1px solid #d9d9d9', borderRadius: 4, marginBottom: 12 }}>
          <SignatureCanvas
            ref={padRef}
            penColor="black"
            canvasProps={{ width: 320, height: 160 }}
          />
        </div>

        <div style={{ display: 'flex', gap: 8 }}>
          <Button onClick={handleClear} block>Clear</Button>
          <Button type="primary" onClick={handleAddToCanvas} block>Add to canvas</Button>
        </div>
      </div>
    );
  }),
};

<SidePanel store={store} sections={[...DEFAULT_SECTIONS, SignatureSection]} />;

Going further​

① SVG signature (lossless scaling)​

react-signature-canvas only outputs PNG. For SVG, switch to signature_pad:

import SignaturePad from 'signature_pad';

const pad = new SignaturePad(canvasEl);
// ... user draws ...
const svg = pad.toSVG();

import { svgToURL } from '@ydesign/react-editor/utils/svg';
store.addElement({
  type: 'Image',
  src: svgToURL(svg),
  // ...
});

② Flatten signature into a contract PDF​

For legal/contract flows the signature usually needs to ship as part of a PDF:

  1. Size the canvas to A4 @ 300 dpi (2480 × 3508) and lay out the contract
  2. Add the signature to the canvas
  3. Call store.saveAsImage({ multiplier: 1, format: 'png' }) to get the full-page PNG
  4. Wrap the PNG in a PDF with jsPDF

③ Server-side storage​

Signature dataURLs are large (tens of KB). In production:

  1. Upload to your backend / OSS right after capture
  2. Replace src with the short URL
  3. Don't leave big base64 blobs in store.toJSON()

See also​