signature-canvas-plugin
v1.1.8
Published
A reusable signature canvas plugin for capturing eSignatures.
Downloads
906
Maintainers
akstar007Readme
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-pluginVia 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>