Signature Padとは？canvasで手書き署名を描画・保存する

ページ内ナビ

概要

Signature Padは、HTML5 canvas上で滑らかな手書き署名を描画するJavaScriptライブラリです。可変幅のBézier曲線補間を使い、描画結果を画像データ、SVG、または点列データとして扱えます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-09-30

主な特徴

canvas上で滑らかな手書きストロークを描画する

マウスやタッチ入力から可変幅のBézier曲線を生成し、デスクトップとモバイルブラウザのcanvas上へ滑らかな線を描きます。

出典：[2]

PNG・JPEG・SVG・点列データとして取り出す

toDataURLでPNG/JPEG/SVG data URLを取得でき、toSVGではSVG文字列、toDataでは点列データとして保存・復元できます。

出典：[2]

向いている用途

Webフォームへ手書き入力欄を組み込みたい場合に向く

申請フォーム、確認画面、端末上の手書き入力など、canvasを使った署名・筆跡入力UIをJavaScriptだけで追加したい用途に向きます。

出典：[2]

導入前の確認

高DPIとcanvas resizeをアプリ側で処理する

高DPI画面ではdevicePixelRatioに合わせてcanvasを拡大・scaleする必要があります。またcanvasのwidth/height変更は内容を消去するため、resize時はredrawやデータ退避を考慮します。

出典：[2]

画像復元と内部点列データは同じではない

fromDataURLで画像を描画しても内部の点列データは復元されないため、その後のtoDataは期待どおり動作しません。編集や再描画が必要なら点列データを保持します。

出典：[2]

参考にした公式資料

[1]szimek/signature_pad repository(2026-09-30)
[2]Signature Pad README(2026-09-30)
[3]Signature Pad MIT license(2026-09-30)

編集部からの補足

軽量な描画部品として導入しやすい一方、canvasの高DPI対応とresize時のデータ保持はアプリ側の実装ポイントです。本人確認や業務ワークフローは別レイヤーとして設計します。

3ステップで試す

1
Signature Padを追加
READMEのnpm手順でライブラリを既存のWebプロジェクトへ追加します。
npm install --save signature_pad
2
canvasへ署名入力を接続
import SignaturePad from 'signature_pad'; の後で対象canvasを渡して初期化します。
const canvas = document.querySelector("canvas"); const signaturePad = new SignaturePad(canvas);
3
署名を画像として取得
PNG data URLを取得します。SVGが必要ならtoSVG、編集可能な点列が必要ならtoDataを使います。
const pngDataUrl = signaturePad.toDataURL();

公式READMEで確認

成長

成長の推移 · 直近30日

12,047 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 9
Open PR: 1

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

signature
signature-pad
canvas
javascript
drawing

Stars: 12,047
Forks: 2,171
Watchers: 213
Open Issues: 4
Contributors: 57
所有者種別: User
主要言語: TypeScript
ライセンス: MIT
リポジトリ最終更新: 2026/09/30

概要

特徴と向いている用途

主な特徴

canvas上で滑らかな手書きストロークを描画する

PNG・JPEG・SVG・点列データとして取り出す

向いている用途

Webフォームへ手書き入力欄を組み込みたい場合に向く

導入前の確認

高DPIとcanvas resizeをアプリ側で処理する

画像復元と内部点列データは同じではない

参考にした公式資料

3ステップで試す

Signature Padを追加

canvasへ署名入力を接続

署名を画像として取得

成長

開発アクティビティ

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHub Topics

関連情報

あわせて探訪