Capture Signature using HTML5 Canvas inside Salesforce Lightning Web Component [Salesforce Files]

I am exploring Lightning Web Components and thought of preparing an use case on signature capturing functionality, but want to leverage native HTML Canvas element without using any 3rd party libraries. Earlier I have work on this type of functionality using Visualforce page and didn’t find any post on Lightning Web Components which motivates me to do this proof-of-concept. Though there are couple of solutions available using Lightning Aura Components.

Features

  • Captures Signature using HTML5 Canvas.
  • Lightweight Component.
  • Uploads image as Salesforce File.
  • Can be use for Salesforce Attachment.
  • Can use this component on any Object Record.
  • Toast Message on Success/Error.

We will create captureSignature component for this functionality and SignatureHelper Class to capture the signature image as Salesforce File for the record.
Following are the lightning web component and Apex class code :

Note : You can access the complete repository from here : https://github.com/mhamzas/Signature-using-LWC

Preview

Special Thanks for Santanu, who created this component initially and gave us the opportunity to extend it.
References :
https://santanuboral.blogspot.com/2019/10/LWC-capture-signature.html?m=1
Lightning Web Components Developer Guide
HTML Canvas References


Leave a Comment