UI/UX

SignaturePad Resize

by will

I encountered a problem of signature pad that I can’t control the height of pad. Obviously, it resizes itself at runtime.

Check out this instruction: https://github.com/szimek/signature_pad

According to the sample code.

function resizeCanvas() {
        // When zoomed out to less than 100%, for some very strange reason,
        // some browsers report devicePixelRatio as less than 1
        // and only part of the canvas is cleared then.
        var ratio = Math.max(window.devicePixelRatio || 1, 1);
        
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        console.log(`canvas.width: ${canvas.width}, canvas.height: ${canvas.height}`)
        canvas.getContext("2d").scale(ratio, ratio);
        signaturePad.clear();
    }

Set ratio 1,1 for scaling so we will never encounter problem of scaling. We can freely set canvas width and height.

canvas.getContext("2d").scale(1, 1);
0