Test demo in readme

[FareedR]

Testing out demo link given in readme. when I use mobile, signature that i sign exceed from the box, do the package cater that use case? how to prevent that kind of issue?

[UziTech]

That depends on what you expect to happen. Different browsers do different things with the Pointer Events. I am working (slowly) on PR #703 to try to unify them by ending a line if it goes beyond the box but mobile browsers don't trigger pointerleave events the same as desktop browsers.

[FareedR]

based on current version in PR #703, that is exactly what i want in mobile browsers. but it doesnt work from my end.

desktop browser
https://user-images.githubusercontent.com/40460352/234797752-31959894-e567-47ed-9ac6-8162f2f87ae8.mov

mobile browser
https://user-images.githubusercontent.com/40460352/234797723-ff47e14a-d26b-45f0-9bd0-2ce1a9700983.mov

html
<canvas id="signature-pad" height="400" class="signature-pad"></canvas>

javascript

   $(function() {
        var canvas = $('#signature-pad')[0];
        const signaturePad = new SignaturePad(canvas, {
            // any setting for signature pad
        });

        signaturePad.addEventListener("beginStroke", () => {
            var data = signaturePad.toDataURL('image/png');
            $('#authorised_signature').val(data);
        });

        function cropSignatureCanvas (){
            // First duplicate the canvas to not alter the original
            var croppedCanvas = document.createElement('canvas'),
            croppedCtx = croppedCanvas.getContext('2d');

            croppedCanvas.width = canvas.width;
            croppedCanvas.height = canvas.height;
            croppedCtx.drawImage(canvas, 0, 0);

            // Next do the actual cropping
            var w = croppedCanvas.width,
            h = croppedCanvas.height,
            pix = {
                x: [],
                y: []
            },
            imageData = croppedCtx.getImageData(0, 0, croppedCanvas.width, croppedCanvas.height),
            x, y, index;

            for (y = 0; y < h; y++) {
            for (x = 0; x < w; x++) {
                index = (y * w + x) * 4;
                if (imageData.data[index + 3] > 0) {
                pix.x.push(x);
                pix.y.push(y);
                }
            }
            }
            pix.x.sort(function(a, b) {
            return a - b
            });
            pix.y.sort(function(a, b) {
            return a - b
            });
            var n = pix.x.length - 1;

            w = pix.x[n] - pix.x[0];
            h = pix.y[n] - pix.y[0];
            var cut = croppedCtx.getImageData(pix.x[0], pix.y[0], w, h);

            croppedCanvas.width = w;
            croppedCanvas.height = h;
            croppedCtx.putImageData(cut, 0, 0);

            return croppedCanvas.toDataURL();
        }

        function resizeCanvas() {
            const ratio =  Math.max(window.devicePixelRatio || 1, 1);
            canvas.width = canvas.offsetWidth;
            canvas.height = canvas.offsetHeight;
            // canvas.getContext("2d").scale(ratio, ratio);
            signaturePad.clear(); // otherwise isEmpty() might return incorrect value
        }

        window.addEventListener("resize", resizeCanvas);
        resizeCanvas();

        $('form').submit(function(e) {
            e.preventDefault();
            var data = signaturePad.toDataURL('image/png');
            $('#authorised_signature').val(data);
            $(this.submit());
        })

        $('#clear').click(function(e) {
            e.preventDefault();
            signaturePad.clear()
        })
    })