Expand Signature Pad/Canvas Results in shifted signature cursor placement

App Development
6

Greetings TB Community-

With the help of Kevin Ruiz (@kruizf201) the following code will expand the signature canvas to 100% of the window width. Note there are two different pieces of code - one for add form and one for edit form.

ADD FORM:
CSS

.parent-container {
    width: 100%;
}

.ctrl-sign {
    width: 100%;
}

.signature-pad {
    width: 100%;
    position: relative;
}

.signature-pad canvas {
    width: 100% !important;
    height: auto;
}

JAVASCRIPT (Change to your component number that holds the signature field)

TB.render('component_X', function(data) {
    
    // Set the width of the container and canvas to 100%
    $('.ctrl-sign').css('width', '100%');
    $('.signature-pad').css('width', '100%');
    $('.pad').css('width', '100%');
    
    // Maintain aspect ratio of canvas
    var canvas = $('.pad')[0];
    var context = canvas.getContext('2d');
    var originalWidth = canvas.width;
    var originalHeight = canvas.height;
    
    function resizeCanvas() {
        var newWidth = $('.signature-pad').width();
        // var newHeight = (originalHeight / originalWidth) * newWidth;
        canvas.width = newWidth;
        canvas.height = 120;
    }
    
    $(window).resize(resizeCanvas);
    resizeCanvas(); // Initial resize
    
});

EDIT FORM:
CSS

.signature-pad-viewer {
    width: 100%;
    text-align: center;
}

.parent-container {
    width: 100%;
}

.ctrl-sign {
    width: 100%;
}

.signature-pad {
    width: 100%;
    position: relative;
}

.signature-pad canvas {
    width: 100% !important;
    height: auto;
}

JAVASCRIPT (Change to your component number that holds the signature field AND change to your field ID/number of the signature field - you can find the field ID in the Data Builder)

TB.render('component_X', function(data) {

    $("#field_block_field_XXXX > div > div.t-form-signature > ctrl-sign > div > div > button").on("click", function(){
        
        $('.ctrl-sign').css('width', '100%');
        $('.signature-pad').css('width', '100%');
        $('.pad').css('width', '100%');

        var canvas = $('.pad')[0];
        var context = canvas.getContext('2d');
        var originalWidth = canvas.width;
        var originalHeight = canvas.height;
        
        function resizeCanvas() {
            var newWidth = $('.signature-pad').width();
            // var newHeight = (originalHeight / originalWidth) * newWidth;
            canvas.width = newWidth;
            canvas.height = 120;
        }
        
        $(window).resize(resizeCanvas);
        resizeCanvas(); // Initial resize

    });
    
});

Hope this helps,
Adam

1 Like