Estoy usando html2canvas para obtener la imagen de un elemento html (input[type='text']). Tengo un control que aumenta el tamaño de fuente del campo de texto y también el tamaño del campo para acomodar el texto en él.

Antes de cambiar la fuente, html2canvas obtiene la imagen del campo y su contenido correctamente. Pero cuando aumenta el tamaño de la fuente, la imagen no se vuelve a mostrar completamente. He puesto un borde rojo alrededor del lienzo y el borde gris es el que está alrededor del elemento html que se está ajustando.

Aquí está el código que toma la instantánea:

 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); }); }

Aquí están las imágenes obtenidas a medida que cambia el tamaño de fuente del campo

¿Cómo puede el contenido permanecer centrado dentro del lienzo cuando cambia el tamaño de la fuente?

La página no tiene desplazamiento.