Estoy tratando de dibujar texto en un lienzo, convertirlo en una imagen y luego convertirlo en un PDF. La mayor parte es bastante sencilla, pero parece que jsPDF siempre convierte las imágenes a PDF en una proporción de 72 píxeles por pulgada. Esto produce imágenes muy borrosas y de baja resolución, ciertamente no adecuadas para texto.

Esto es lo que genera que:

 const size = [8.5, 11]; // Size in inches const canvas = document.createElement("canvas"); canvas.width = size[0] * 72; canvas.height = size[1] * 72; const context = canvas.getContext("2d"); context.font = "12pt Arial"; context.textBaseline = "top"; context.fillText("test", 200, 100); const image = canvas.toDataURL("image/png"); const pageOptions = { unit: "px", format: size.map(s => s * 72), }; const doc = new jsPDF(pageOptions); doc.addImage(image, "PNG", 0, 0, size[0] * 72, size[1] * 72); doc.output('dataurlnewwindow');

Si cambio todas las instancias de 72 para decir 300 , generará una imagen absolutamente enorme. Si cambio solo el tamaño del lienzo a 300 y el tamaño de la fuente en consecuencia, pero dejo todo con jsPDF en 72 , hará exactamente lo que quiero en Firefox, aunque sea un poco lento, pero el PDF resultante nunca se procesará en Chrome. ¿Cuál es el problema con este código en los navegadores basados en Chromium y cómo lo soluciono? ¿O hay una mejor manera de hacer esto?