Creating a signature pad with javascript in cordova

Signatures are important both for legal identification and personal expression. What form your signature takes may send a message about your attitude, personality and position.

In the digital world, the graphical representation of a signature is required in a lot of environments and as a developer you may be prepared for each madness that your client may require. In this article, you'll learn how to implement a simple signature pad in cordova using a canvas.

Requirements

To achieve our goal, we are goin to use the signature pad library. Signature Pad is a JavaScript library for drawing smooth signatures. It's HTML5 canvas based and uses variable width Bézier curve interpolation based on Smoother Signatures. It works in all modern desktop and mobile browsers and doesn't depend on any external libraries.

You can get the minified file in the Github official repository here.

Implementation

To get started, add the reference to the signature pad script in your document with a script tag :

<script type="text/javascript" src="js/signature_pad.min.js"></script>

Now add the basic markup that needs our app to work. We'll add a canvas where the library will work, besides of two buttons to execute the export and reset action and an image tag to preview the dataURL of the signature.

<canvas id="signature" style="border: 1px solid black;"></canvas>
<img id="preview" />
<br>
<div style="text-align:center;">
    <input type="button" id="export" value="Export"/>
    <input type="button" id="reset" value="Reset"/>
</div>

The point of use a library is to forget about handle how the path will be rendered on the canvas, to fix the path to prevent any pixelated signature. Besides, the Signature pad library is easy to use and allow to change many of the basic features that you may need to implement.

The following code should give the canvas its dimensions and will initialize signature pad on it. Remember that there are a lot of available methods and options to change on its initialization, you can read more about in the repository.

var canvas = document.getElementById("signature");
var w = window.innerWidth;
var h = window.innerHeight;

// As the canvas doesn't has any size, we'll specify it with JS
// The width of the canvas will be the width of the device
canvas.width = w;
// The height of the canvas will be (almost) the third part of the screen height.
canvas.height = h/2.5;

var signaturePad = new SignaturePad(canvas,{
    dotSize: 1
});

document.getElementById("export").addEventListener("click",function(e){
    // Feel free to do whatever you want with the image
    // as export to a server or even save it on the device.
    var imageURI = signaturePad.toDataURL();    
    document.getElementById("preview").src = imageURI;
},false);

document.getElementById("reset").addEventListener("click",function(e){
    // Clears the canvas
    signaturePad.clear();
},false);

The toDataURL method of the signature pad will return a base64 url of the image, you can use it to create an image file on the device (learn how to save a base64 image into the device in cordova here) or send it to your server and create the image there.

And you'll be ready to go. You can add different event listeners in the document as the orientation change or the resize event to change the dimensions of your canvas.

Conclusion

With Signaturepad.js we don't need to worry about how the line will be drawn on the canvas or how the user moves the touch pen (or finger) into the screen.

Remember that although the signature pad works good with the finger, the use of a touch pen is recommended to improve the user experience.

Have fun .