var canvas = document.getElementById('signature-canvas');
var signaturePad = canvas.getContext('2d');
var signatureData = '';
canvas.addEventListener('mousedown', function (e) {
signaturePad.beginPath();
signaturePad.moveTo(e.offsetX, e.offsetY);
canvas.addEventListener('mousemove', draw, false);
}, false);
canvas.addEventListener('mouseup', function () {
canvas.removeEventListener('mousemove', draw, false);
}, false);
function draw(e) {
signaturePad.lineTo(e.offsetX, e.offsetY);
signaturePad.stroke();
}
function clearSignature() {
signaturePad.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('signature').value = '';
}
function saveSignature() {
signatureData = canvas.toDataURL('image/png');
document.getElementById('signature').value = signatureData;
}