Embed a free Digital Signature to Salesforce Visualforce Page Using HTML5 Canvas

Requirement: 

We had to provide an interface where the user could add a signature digitally (using mouse or touch, depending on the device) in Salesforce Visualforce Page, and embed that digital signature to the invoice generated only using out-of-the-box functionality and not using any 3rd-party vendor tools like Adobe eSign, DocuSign and other tools with premium license.

Challenge:

Using open-source and out-of-the-box functionalities of Salesforce and not using any 3rd-party vendor tool.

Solution:

To achieve this, we have used a jQuery plug-in called 'Sketch.js' along with the common jQuery CDN. 

• jQuery plug-in: https://github.com/soulwire/sketch.js/blob/master/js/sketch.js

• jQuery CDN: https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js

So, we have achieved the desired results by using HTML5 Canvas and JavaScript remoting. 

Now, we would be adding jQuery and Sketch.js file content in Salesforce Static resources repository.

Then, we need to setup JavaScript event listeners in the Visualforce (VF) page to capture the events like touch-start, touch-move, and touch-end performed on the canvas. The sketch.js will handle the touch/drag events performed on the canvas.

The purpose of using JavaScript remoting is to ensure that the Canvas content is properly passed to Apex Controller and can be saved. The canvas would be converted into Base64 String with the Canvas.toDataURI() method. This is how we would be pushing the converted data bytes from the Canvas into an Attachment.

Below is the source code to add digital signature in Visualforce Page & APEX class:

Visualforce Page:

<apex:page controller="SignDemo">

 <script type="text/javascript" >

    $( window ).load(function(){
        $('#Sign').sketch(); // associating sketch function with canvas.
    });

// clear canvas on clear button.
function clearSketch(){          

        $('#Sign').replaceWith('<canvas id="Sign" style="border:2px solid; border-radius:10px 10px 10px 10px;height: 150px;width: 300px;background:white; border-color:lightgray"></canvas>');

        $('#Sign').sketch();
 }  

function save(){
       // Get Data URL from the canvas i.e. signed by the user.
      var dataUrl = document.getElementById('Sign').toDataURL();

     // use Remote Action function to generate image.
     Visualforce.remoting.Manager.invokeAction(

           '{!$RemoteAction.SignDemo.GenerateImage}',dataUrl ,

            function(result, event) {

                if (event.status) {
                // Redirect to the attachment and open attachment as image.
                window.open('/servlet/servlet.FileDownload?file='+result);
           }
       });

   }

</script>

    Draw your signature : 

    <div>
        <canvas id="Sign" style="border:2px solid; border-radius:10px 10px 10px 10px;height: 150px;

                                    width: 300px;background:white; border-color:lightgray" ></canvas>

        <input type="button" value="Clear"  onclick="clearSketch()" /> 
    </div>
    <br/>

    <input type='button' value='save' onclick='save()'/>

</apex:page>

Apex Controller:

public class SignDemo{

    //Create attachment and return id of the attachment.

@RemoteAction

    public static string GenerateImage(string dataurl){

        Attachment myAttach = new Attachment();

        myAttach.name = 'Sign.png';

        myAttach.ParentId ='';  //Add ID of the parent object for the attachment (Account,Contact,etc..)

        myAttach.body = ((Blob) EncodingUtil.base64Decode(dataurl.split(',')[1]));

        insert myAttach;

        return myAttach.Id;
    }
}

Output:
Below is the illustration of the canvas board and signature, which can be performed by the user. 

Below is the sample invoice file generated containing the digital signature. 

If you have any questions you can reach out our Salesforce Consulting team here.