Implement Drawing and Signature in Salesforce Lightning Web Components

While exploring HTML5 components and jQuery into Lightning Web Components I have plan in mind to have develop use case on drawing and specially to capture users signature functionality on any objects. As jQuery is still very popular Java Script library to support any web browser even in Mobile Apps, I have decide to do to support Salesforce desktop and mobile App Salesforce1 for Android and Apple.

1. Business requirement is to capture a Customer Digital Signature before Deal Opportunity.

2. Requirements is Customer to Scratch specific drawing according to Business needs.

Basics -

Before get start in depth coding lets have learn some basics -

I have used Signature Pad which is a jQuery plugin that takes advantage of HTML5 canvaselement and javascript to create a flexible and smooth Signature / Drawing Pad on your web page & app and we will building on Lightening Web Component.

<canvas class="pad" width={cWidth} height={cHeight}></canvas>

The HTML<canvas> tag is used to HTML5 draw graphics, on the fly, via scripting (usually JavaScript). However, the <canvas> element has no drawing abilities of its own (it is only a container for graphics) - you must use a script to actually draw the graphics.

The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.

var $drawnCanvas = this.template.querySelector('canvas');

The renderedCallback() is unique to Lightning Web Components. Use it to perform logic after a component has finished the rendering phase. This hook flows from child to parent. When a component renders, the expressions used in the template are reevaluated.

Salesforce Lightning Web Component

Lightning web components are custom HTML elements built using HTML and modern JavaScript. Lightning web components and Aura components can coexist and interoperate on a page. To admins and end users, they both appear as Lightning components.

If you are good in web development but new in LWC please try in trailhead to Create a Hello World Lightning Web Component .

Now Let workout to the steps how we can develop smooth drawing or signature pad and save that drawing to specific record of an Object , here I have used Opportunity for my use cases.

Step: 1 - Create Lightning Web Component project as I named it 'drawingPadLWC' .

Step: 2 - Under project directory you will have drawingPadLWC.html  there will have some HTML code define UI elements in drawingPadLWC.html and drawingPadLWC.css defined drawing pad's cursor !

Step: 3 - Now upload Jquery1_5_1.js and JQuerySignaturePad.js (files are attached) to static resources and Include  those in drawingPadLWC.js
Step: 4 - Have a look into renderedCallback()from drawingPadLWC.js 
where we have populated drawing canvas to ready for draw when run specific page.  signaturePad is calling to function that will be found  in JQuerySignaturePad.js  

Below example code will explain how possible rendering canvas to drawing mode.

    Step: 5 - How to Save Your Drawing to related record of your object?
Apex Class DrawingPadHandler.cs is responsible to save drawing class where saveDiagram(..) method will be actioned from LWC javascript drawingPadLWC.js . This action defined in onclick button event which is defined in LWC html to drawingPadLWC.html 
<lightning-button variant="destructive" label="Save" title="Save" onclick={saveDrawing} class="slds-m-left_x-small"></lightning-button>
where onclick={saveDrawing} actually calling to javascript function in drawingPadLWC.js
saveDrawing (event) {...}
and that saveDrawing event function call to Apex class to handle save diagram in your Salesforce org as content attachment with specific record.

Please post comment to get complete AppExchange package Link.

Thank You to read this.

Here are sources inline -

Attached minified js files for static resource:
jquery.signaturepad.min.js and
jquery.min.js

Ref:

https://developer.salesforce.com/docs/component-library/documentation/en/lwc
https://www.jqueryscript.net/other/Smooth-Signature-Pad-Plugin-with-jQuery-Html5-Canvas.html
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_lifecycle_hooks_rendered