title: How to convert a high resolution image to a PDF in JS?
body: <p>I'm trying to draw text on a canvas, convert that to an image, and then convert that to a PDF. Most of it is pretty straightforward, but jsPDF seems to always convert the images to PDFs at a ratio of 72 pixels per inch. This produces very blurry, low-resolution images, certainly not suitable for text.</p>
  <p><a href="https://i.stack.imgur.com/sQ32C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sQ32C.png" alt="blurry text of &quot;test&quot;" /></a></p>
  <p>This is what generates that:</p>
  <pre class="lang-js prettyprint-override"><code>const size = [8.5, 11]; // Size in inches
  const canvas = document.createElement(&quot;canvas&quot;);
  canvas.width = size[0] * 72;
  canvas.height = size[1] * 72;
  const context = canvas.getContext(&quot;2d&quot;);
  context.font = &quot;12pt Arial&quot;;
  context.textBaseline = &quot;top&quot;;
  context.fillText(&quot;test&quot;, 200, 100);
  const image = canvas.toDataURL(&quot;image/png&quot;);
  
  const pageOptions = {
      unit: &quot;px&quot;,
      format: size.map(s =&gt; s * 72),
  };
  const doc = new jsPDF(pageOptions);
  doc.addImage(image, &quot;PNG&quot;, 0, 0, size[0] * 72, size[1] * 72);
  doc.output('dataurlnewwindow');
  </code></pre>
  <p>If I change all the instances of <code>72</code> to say, <code>300</code>, it will generate an absolutely huge image. If I change only the canvas size to <code>300</code> and the font size accordingly but leave everything with jsPDF at <code>72</code>, it will do exactly what I want in Firefox, if a bit slow, but the resulting PDF will never actually render in Chrome. What's the problem with this code in Chromium-based browsers, and how do I fix it? Or is there a better way to do this?</p>