signature-canvas-plugin
Version:
A reusable signature canvas plugin for capturing eSignatures.
67 lines (52 loc) • 2.02 kB
Markdown
# 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
```bash
npm install signature-canvas-plugin
```
### Via Script
```bash
<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
```bash
<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>