HTML :
<svg height="200" width="400" style="background-color:#ffd800;" viewBox="0 0 400 200" >
<rect id="SignPad" height="200" width="400" fill="#ffa" style="cursor:default;">
</rect>
<path id="Sign" stroke="black" stroke-width="2" fill="none"
pointer-events="none" stroke-linecap="round" />
</svg>
JavaScript :
$(document).ready(function () {
var signPad = $('#SignPad'),
sign = $('#Sign'),
signaturePath = '',
isMouseDown = false;
signPad.mousedown(function (e) {
signaturePath += 'M' + getCoords(e) + ' L'+ getCoords(e) +' ';
sign.attr('d', signaturePath);
isMouseDown = true;
})
signPad.mousemove(function (e) {
if (isMouseDown) {
signaturePath += 'L' + getCoords(e) + ' ';
sign.attr('d', signaturePath);
}
})
signPad.mouseup(function (e) {
isMouseDown = false;
})
function getCoords(e) {
return e.offsetX + ',' + e.offsetY;
}
});
Example :