A lightweight web component for capturing digital signatures on a canvas.

<link href="./kv-sign.css" type="text/css" rel="stylesheet">
<script src="./kv-sign.js" defer></script>

<kv-sign></kv-sign>

• width - Canvas width in pixels (default: 500)
• height - Canvas height in pixels (default: 200)
• color - Stroke color (default: #000)
• linewidth - Line width in pixels (default: 2)

<kv-sign></kv-sign>

<kv-sign width="800" height="300"></kv-sign>

<kv-sign color="#0066cc" linewidth="3"></kv-sign>

The component dispatches custom events:

Fired when the save button is clicked.

element.addEventListener('save', (e) => {
    if (e.detail.dataUrl) {
        // Signature saved successfully
        console.log(e.detail.dataUrl); // Base64 PNG data URL
    } else {
        // Canvas is blank
        console.log(e.detail.error);
    }
});

Fired when the clear button is clicked.

element.addEventListener('clear', () => {
    console.log('Signature cleared');
});

Returns the signature as a base64 PNG data URL, or null if canvas is blank.

const signature = document.querySelector('kv-sign').getSignature();

Returns true if the canvas is blank.

const isEmpty = document.querySelector('kv-sign').isEmpty();

Clears the signature canvas.

document.querySelector('kv-sign').clear();

• Touch and pointer event support
• Smooth drawing with rounded line caps
• Blank canvas detection
• Custom colors and line widths
• Events for integration with forms
• Responsive design

Giancarlo Trevisan - 2026/01/27