Smooth Canvas Signature Pad with jQuery and HTML5

by Posted on

Are you looking for signature pad for your web app? so that your user can attached their sign on any e-documents then in this post I am going to share simple jQuery plugin which create Smooth Canvas Signature with jQuery and HTML5. sign.js is a jQuery plugin which generates a smooth, mobile-friendly Signature Pad for capturing your signature and saving as an image using HTML5 canvas API.
Canvas-Signature-jQuery


Libraries

The plugin dependent on jQuery core library so include it first after that load Plugin’s library on page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="sign.js"></script>

HTML

Create a canvas area for the signature pad with reset button to reset signature.

<canvas id="myCanvas"></canvas>
<input type="button" value="Reset" id='resetSign'>



JS

Initialzie the signature pad plugin on document ready. and customising by passing default options.

$(document).ready(function() {
    $('#myCanvas').sign({
        resetButton: $('#resetSign'), // Reset input * optional
        lineWidth: 5, // * Optional
        width: 300, // * optional. Default: 500
        height: 250, // * optional. Default: 300
    });
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome code is developed by lucasato. Visit their official github repository for more information and follow for future updates.


Published by admin