Learn Javascript

Make Online Signature with HTML + Javascript

If you have some project need signature action on your form app, then For me the easy way to create online signature is just use signature_pad javascript library.

Signature Pad is a JavaScript library for drawing smooth signatures. It’s HTML5 canvas based and uses variable width Bézier curve interpolation based on Smoother Signatures post by Square. It works in all modern desktop and mobile browsers and doesn’t depend on any external libraries.

How to use ?

1. Embed the CDN library

<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>

2. Setup Signature pad

var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
            backgroundColor: 'rgba(255, 255, 255, 0)',
    penColor: 'rgb(0, 0, 0)'
});

3. Get The Signature Result

signaturePad.toDataURL('image/png');

Full Example HTML :

The output will be like this :

[xyz-ihs snippet=”signature-example”]

You can select a different version at https://www.jsdelivr.com/package/npm/signature_pad

Github : https://github.com/szimek/signature_pad

Leave a Comment

Your email address will not be published. Required fields are marked *