Signature Pad

by Yamini Sontakke

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.3.6/signature_pad.min.js"></script>
<label>Sign On the Line Below:</label><br/>
<canvas id="thecanvas" width="475px" height="225px"></canvas>
 <div class="buttons">
     <button class="save">Save</button>
     <button class="clear">Clear</button>
 </div>

CSS

body{font-family: arial; background-color: #656565; text-align: center; margin: auto;}
canvas#thecanvas{border: dashed 1px #333; cursor:pointer; background-color: rgba(255,255,255,.85); width: 475px; height: 225px;}
div.buttons{text-align: center; width: 477px; background-color: rgba(255,255,255,.85); position: relative; top: -3px; margin: auto;}
div.buttons button{padding: 15px; margin: 5px; cursor: pointer;}
label{margin-top: 25px;width: 467px; padding: 5px; text-align: left; display: inline-block; background-color: rgba(255,255,255,.85);}

JavaScript

$(function(){ 
    var canvas = document.getElementById('thecanvas');
    var signaturePad = new SignaturePad(canvas);    
    drawSignatureLine();
    $('button.save').click(function(){               
        window.open(signaturePad.toDataURL("image/png"));
    });
    $('button.clear').click(function(){
        signaturePad.clear();        
        drawSignatureLine();
    });
    function drawSignatureLine(){        
          var context = canvas.getContext('2d');          
          context.lineWidth = .5;
          context.strokeStyle = '#333';
          context.beginPath();
          context.moveTo(0, 150);
          context.lineTo(500, 150);
          context.stroke();
    }  
});