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; }