OSS探訪

HTML5 canvas上で滑らかな署名入力を描画し、PNG・JPEG・SVGへ出力する

スコアの見方

OSS規模スコアはStars・Watchers・Forks・Contributorsを対数圧縮して重み付けした現在の規模指標(上限なし)です。発掘スコアは現在のOSS規模スコアから発掘時点のOSS規模スコアを引いた値、更新ペースは直近30日Commit数、成長モメンタムは直近の観測期間におけるOSS規模スコア差、OSS健全度は取得できた更新状況・Community Health・Releaseの0〜100評価です。

Stars
12,047
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/09/30
ページ内ナビ

概要

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

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日:

主な特徴

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. [1]szimek/signature_pad repository(2026-09-30)
  2. [2]Signature Pad README(2026-09-30)
  3. [3]Signature Pad MIT license(2026-09-30)
編集部からの補足

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

3ステップで試す

  1. 1

    Signature Padを追加

    READMEのnpm手順でライブラリを既存のWebプロジェクトへ追加します。

    npm install --save signature_pad
  2. 2

    canvasへ署名入力を接続

    import SignaturePad from 'signature_pad'; の後で対象canvasを渡して初期化します。

    const canvas = document.querySelector("canvas"); const signaturePad = new SignaturePad(canvas);
  3. 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 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

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

情報の誤りを報告

掲載内容に誤りや古い情報があればお知らせください。

このページを読んで、次に何をすればよいか分かりましたか?