Hello there, I came across an opensource tool that is used to get a digital signature on the web using javascript. It is called signature_pad.

With 383k+ weekly downloads, I found signature_pad library is easy to install and use. It also has over 9.3k+ stars on Github making it a popular choice.

Installation

npm install — save signature_pad

Usage

const canvas = document.querySelector("canvas");
 
const signaturePad = new SignaturePad(canvas);
 
// Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)
signaturePad.toDataURL(); // save image as PNG
 
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");

Please note that you can check the official signature_pad’s Readme.md for further information. I have only included the code snippet that I dominantly used.

Although, I have had some issues around setting canvas height and width without breaking the signature feature. I have worked my way around using this https://github.com/szimek/signature_pad/issues/185

Demo

Check out this demo from the official docs.

Conclusion:

There are popular tools like PandaDoc, Docusign that are paid. If you are looking for an open source tool to help you with capturing a digital signature, I would recommend signature_pad

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

Tired of AI-generated code that works but nobody understands?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com