Signature Pad using SVG

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 :