I am using html2canvas to get the image of an html element(input[type='text']). I have a control which increases the font size of the text field, and also the size of the field to accomodate the text in it.

Before changing the font, html2canvas gets the image of the field and its contents correctly. But when the font size increases, the image is not fully shown again. I have put a red border around the canvas and the gray border is the one around the html element being snapped.

Here is the code that takes the snapshot:

function snapElem(el) {

    function hiddenClone(element){
        // Create clone of element
        let clone = element.cloneNode(true);

        // Position element relatively within the
        // body but still out of the viewport
        let style = clone.style;
        style.position = 'relative';
        style.top = window.innerHeight + 'px';
        style.left = 0;

        // Append clone to body and return the clone
        document.body.appendChild(clone);
        return clone;
    }


// Clone element
    let clone = hiddenClone(el);
    clone.id = "za-clone-id-"+new Date().getTime();


// Use clone with htm2canvas and delete clone
    html2canvas(clone, {
        backgroundColor:null,
        allowTaint: true,
        useCORS: true
    }).then(function (canvas) {
        canvas.style.border  = '2px solid red';
        console.log(canvas.toDataURL());
        canvas.id = "za-real-id-"+new Date().getTime();
        document.body.removeChild(clone);
        document.querySelector(".body-right").appendChild(canvas);
    }).catch((e) => {
        // Handle errors
        console.log(e);
    });
}

Here are the images obtained as the font size of the field changes

How can the content remain centered within the canvas when the font size changes.

The page has no scrolling.