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. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github —  https://github.com/ramu-narasinga

My website —  https://ramunarasinga.com

My Youtube channel —  https://www.youtube.com/@ramu-narasinga

Learning platform —  https://thinkthroo.com

Codebase Architecture —  https://app.thinkthroo.com/architecture

Best practices —  https://app.thinkthroo.com/best-practices

Production-grade projects —  https://app.thinkthroo.com/production-grade-projects