Smooth Canvas Signature Pad with jQuery and HTML5

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.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.