Signature Box demo

Just a signature / input box using rectangles to draw signatures, it is much better to use paths to perform these!

by Yamini Sontakke

HTML

<strong>Signature</strong><br/>
<canvas id="signaturebox" width="300" height="120" border="1"></canvas><br/>
<input type="button" id="save" onclick="dl();" value="save" />
<input type="button" id="save" onclick="clr();" value="clear" />
<a id="imgdlhelper" style="display:none;" href="" download="signature.png" >&nbsp;</a>
<br/>
<a href="http://www.codesign2.co.uk/canvasDemo">Want an Upgrade, with no gaps, support for images and undo - redo capacity with server-side validation? Good click here</a>

CSS

#signaturebox{
    border: 1px solid #666;
}

JavaScript

window.signaturebox = document.getElementById('signaturebox');
window.ctx = signaturebox.getContext('2d');

window.signaturebox.addEventListener('mousemove',function(e){
    if(window.signatureState == 'draw') {
        var mouseX = e.pageX - this.offsetLeft;
        var mouseY = e.pageY - this.offsetTop;
        ctx.fillStyle = "rgba(0,0,0,255)";
        ctx.fillRect( mouseX-1, mouseY-1, 3, 3 );
        console.log('x:'+mouseX+',y:'+mouseY);
    }
});
window.signaturebox.addEventListener('mousedown',function(e){
    window.signatureState = 'draw';
});
window.signaturebox.addEventListener('mouseup',function(e){
    window.signatureState = 'stop';
});

window.dl = function() {
  var data = signaturebox.toDataURL('image/png');
   var imgDLHelper = document.getElementById('imgdlhelper');
   imgDLHelper.setAttribute('href',data.replace('image/png','image/octet-stream'));
   imgDLHelper.click();
    
}
window.clr = function() {
   ctx.fillStyle = "rgba(255,255,255,255)";
   ctx.fillRect( 0, 0, 400, 200 );
}