Tuesday 13 September 2016

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 :