Reactで、指やマウスで手書きできる署名欄を作る方法

import { useEffect, useRef } from 'react';
import type { PointerEvent } from 'react';

// 点は canvas の左上からの CSS px で持つ。1画は、押してから離すまでの点の並び
export type Point = { x: number; y: number };
export type Stroke = Point[];

type Props = {
  strokes: Stroke[];
  onChange: (strokes: Stroke[]) => void;
  label: string;
  height?: number;
};

const LINE_WIDTH = 2.5;
const INK = '#1f2a30';

// 線を描く。画面の canvas と、画像に書き出すときの canvas の両方で使う
export function drawStrokes(ctx: CanvasRenderingContext2D, strokes: Stroke[]) {
  ctx.lineWidth = LINE_WIDTH;
  ctx.lineCap = 'round';
  ctx.lineJoin = 'round';
  ctx.strokeStyle = INK;
  ctx.fillStyle = INK;
  for (const stroke of strokes) {
    const [first, ...rest] = stroke;
    if (rest.length === 0) {
      // 押してすぐ離したときは、点を1つ打つ
      ctx.beginPath();
      ctx.arc(first.x, first.y, LINE_WIDTH / 2, 0, Math.PI * 2);
      ctx.fill();
      continue;
    }
    ctx.beginPath();
    ctx.moveTo(first.x, first.y);
    for (const p of rest) ctx.lineTo(p.x, p.y);
    ctx.stroke();
  }
}

export function SignaturePad({ strokes, onChange, label, height = 180 }: Props) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  // 書いている途中の1画と、それを書いているポインター
  const current = useRef<{ pointerId: number; stroke: Stroke } | null>(null);

  // 表示の大きさと画面の倍率に合わせて canvas の画素数を決め、全部の線を描き直す
  useEffect(() => {
    const canvas = canvasRef.current!;
    const observer = new ResizeObserver(() => {
      const dpr = window.devicePixelRatio || 1;
      canvas.width = Math.round(canvas.clientWidth * dpr);
      canvas.height = Math.round(canvas.clientHeight * dpr);
      const ctx = canvas.getContext('2d')!;
      ctx.scale(dpr, dpr);
      drawStrokes(ctx, strokes);
    });
    observer.observe(canvas);
    return () => observer.disconnect();
  }, [strokes]);

  function pointFrom(e: PointerEvent<HTMLCanvasElement>): Point {
    const r = e.currentTarget.getBoundingClientRect();
    return { x: e.clientX - r.left, y: e.clientY - r.top };
  }

  function handlePointerDown(e: PointerEvent<HTMLCanvasElement>) {
    // 2本目の指や、マウスの左ボタン以外は無視する
    if (current.current || e.button !== 0) return;
    // ポインターが枠の外へ出ても、離すまでこの canvas にイベントが届くようにする
    e.currentTarget.setPointerCapture(e.pointerId);
    const p = pointFrom(e);
    current.current = { pointerId: e.pointerId, stroke: [p] };
    drawStrokes(e.currentTarget.getContext('2d')!, [[p]]);
  }

  function handlePointerMove(e: PointerEvent<HTMLCanvasElement>) {
    const c = current.current;
    if (!c || c.pointerId !== e.pointerId) return;
    const p = pointFrom(e);
    const prev = c.stroke[c.stroke.length - 1];
    c.stroke.push(p);
    // 書いている間は、前の点からの1区間だけを描き足す
    drawStrokes(e.currentTarget.getContext('2d')!, [[prev, p]]);
  }

  function handlePointerUp(e: PointerEvent<HTMLCanvasElement>) {
    const c = current.current;
    if (!c || c.pointerId !== e.pointerId) return;
    current.current = null;
    onChange([...strokes, c.stroke]);
  }

  return (
    <canvas
      ref={canvasRef}
      className="signature-pad"
      style={{ height }}
      role="img"
      aria-label={label}
      onPointerDown={handlePointerDown}
      onPointerMove={handlePointerMove}
      onPointerUp={handlePointerUp}
      onPointerCancel={handlePointerUp}
    />
  );
}

## 2本の指で同時に触れたとき
1画 / y=60 の行 202 画素 / y=140 の行 0 画素

import { useEffect, useState } from 'react';
import { SignaturePad } from './SignaturePad';
import type { Stroke } from './SignaturePad';
import { exportSignature } from './exportSignature';

export function App() {
  const [strokes, setStrokes] = useState<Stroke[]>([]);
  const [saved, setSaved] = useState<{ url: string; width: number; height: number } | null>(null);
  const empty = strokes.length === 0;

  // 前に作った画像の URL は、置き換えたときと画面を離れるときに解放する
  useEffect(() => () => { if (saved) URL.revokeObjectURL(saved.url); }, [saved]);

  async function handleSave() {
    const blob = await exportSignature(strokes);
    const bitmap = await createImageBitmap(blob);
    setSaved({ url: URL.createObjectURL(blob), width: bitmap.width, height: bitmap.height });
  }

  return (
    <main>
      <p className="pad-label">署名欄</p>
      <SignaturePad label="署名欄" strokes={strokes} onChange={setStrokes} />
      <div className="buttons">
        <button type="button" onClick={() => setStrokes(strokes.slice(0, -1))} disabled={empty}>
          1画戻す
        </button>
        <button type="button" onClick={() => setStrokes([])} disabled={empty}>
          消す
        </button>
        <button type="button" onClick={handleSave} disabled={empty}>
          画像にする
        </button>
      </div>
      <p className="status" aria-live="polite">{empty ? 'まだ書かれていません' : `${strokes.length}画`}</p>
      {saved && (
        <figure>
          <img className="result" src={saved.url} alt="書き出した署名" />
          <figcaption>書き出した画像：{saved.width}×{saved.height}px</figcaption>
        </figure>
      )}
    </main>
  );
}

## マウスで書く・1画戻す・消す
はじめ: まだ書かれていません / 色の付いた画素 0
1画目（線）: 1画 / 色の付いた画素 490
2画目（線）: 2画 / 色の付いた画素 1010
3画目（押してすぐ離す）: 3画 / 色の付いた画素 1022
「1画戻す」: 2画 / 色の付いた画素 1010
「消す」: まだ書かれていません / 色の付いた画素 0 / 1画戻す:押せない 消す:押せない 画像にする:押せない

## 画面の倍率と canvas の画素数
devicePixelRatio 1: 表示 364×176 / canvas の画素 364×176
devicePixelRatio 2: 表示 364×176 / canvas の画素 728×352
devicePixelRatio 3: 表示 364×176 / canvas の画素 1092×528

## 表示の幅が変わったとき
幅 400 の画面で書いた後: canvas の画素 364×176 / 色の付いた画素 812
画面の幅を 320 にした後: canvas の画素 284×176 / 色の付いた画素 812 / 1画
canvas.width に同じ値を代入し直した直後: 色の付いた画素 0

## 枠の外へはみ出したとき（setPointerCapture の有無）
あり: 枠の外で離した後: 1画 / 色の付いた画素 743 / 押さずに枠の中へ戻った後: 1画 / 色の付いた画素 743 / canvas に届いた pointerup・pointercancel: pointerup
なし: 枠の外で離した後: まだ書かれていません / 色の付いた画素 650 / 押さずに枠の中へ戻った後: まだ書かれていません / 色の付いた画素 1401 / canvas に届いた pointerup・pointercancel: なし

.signature-pad {
  /* 指でなぞったときに、ページのスクロールや拡大をさせない */
  touch-action: none;
}

## 指でなぞったとき（CDP でタッチを送る。ページは縦に長くしてスクロールできるようにした）
touch-action: none: 1画 / 色の付いた画素 612 / ページのスクロール量 0px / canvas のイベント: pointerdown, pointerup
touch-action: auto: 1画 / 色の付いた画素 74 / ページのスクロール量 144px / canvas のイベント: pointerdown, pointercancel

import { drawStrokes } from './SignaturePad';
import type { Stroke } from './SignaturePad';

type Options = {
  type?: 'image/png' | 'image/jpeg';
  // 指定しなければ背景は透明のまま
  background?: string;
  // 1 CSS px を何画素にするか
  scale?: number;
  // 線のまわりに残す余白（CSS px）
  padding?: number;
};

// 線のある範囲だけを、新しい canvas に描いて画像にする
export function exportSignature(
  strokes: Stroke[],
  { type = 'image/png', background, scale = 2, padding = 8 }: Options = {},
): Promise<Blob> {
  const points = strokes.flat();
  let left = Infinity, top = Infinity, right = -Infinity, bottom = -Infinity;
  for (const p of points) {
    left = Math.min(left, p.x);
    top = Math.min(top, p.y);
    right = Math.max(right, p.x);
    bottom = Math.max(bottom, p.y);
  }
  left -= padding;
  top -= padding;
  const canvas = document.createElement('canvas');
  canvas.width = Math.ceil((right + padding - left) * scale);
  canvas.height = Math.ceil((bottom + padding - top) * scale);
  const ctx = canvas.getContext('2d')!;
  if (background) {
    ctx.fillStyle = background;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }
  ctx.scale(scale, scale);
  ctx.translate(-left, -top);
  drawStrokes(ctx, strokes);
  return new Promise((resolve, reject) => {
    canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('画像にできませんでした'))), type);
  });
}

## 画像に書き出す
2画 / 書き出した画像：432×172px
PNG の左上の画素（R, G, B, A）: 0, 0, 0, 0
JPEG、background なし: image/jpeg / 左上の画素（R, G, B, A）: 0, 0, 0, 255
JPEG、background '#fff': image/jpeg / 左上の画素（R, G, B, A）: 255, 255, 255, 255