Signature-canvas-plugin NPM

Signature Canvas Plugin

A reusable JavaScript plugin for capturing eSignatures using HTML5 Canvas.

Features

Multi-Input Support: Handles mouse, touch, and pen inputs seamlessly.
High DPI Display Support: Ensures crisp signatures on all devices.
Easy Integration: Install via npm or include via a script tag.
Customizable Styles: Modify appearance through CSS variables.
Callback Support: Hook into draw, clear, start, and stop events.
Export Functionality: Retrieve the signature as an image data URL.

Installation

Via npm

npm install signature-canvas-plugin

Via Script

<link rel="stylesheet" href="https://unpkg.com/signature-canvas-plugin/dist/signature-canvas-plugin.css" />
<script src="https://unpkg.com/signature-canvas-plugin/dist/signature-canvas-plugin.umd.js"></script>

Usage

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Signature Canvas Example</title>
  <link rel="stylesheet" href="https://unpkg.com/signature-canvas-plugin/dist/signature-canvas-plugin.css">
</head>
<body>
  <div class="Signature__form">
    <div class="signature_canvas" data-field-type="eSignature">
      <div class="label-wrapper">
        <div class="label-container">
          <label class="signature__label" for="eSignature">Signature:</label>
        </div>
      </div>
      <div class="canvas-container">
        <span>Sign here</span>
        <canvas id="eSignature" class="signature-canvas" width="800" height="450"></canvas>
      </div>
      <div class="signature-button-label">
        <button type="button" class="signatureClearButton">Clear</button>
      </div>
    </div>
  </div>

  <!-- Include the plugin JS -->
  <script src="https://unpkg.com/signature-canvas-plugin/dist/signature-canvas-plugin.umd.js"></script>
  <script>
   
      SignatureCanvasPlugin.initializeSignatureCanvases();
   
  </script>
</body>
</html>