title: Why html2canvas produced blurry pdf file?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#generate').click(function() {
    var pdf = new jsPDF('p', 'pt', 'a4');
    pdf.addHTML($('.pg-section').get(0), function() {
      pdf.save('Test.pdf');
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.pg-section {
    background: white;
  }
  .pg-section h3 {
    padding: 5px;
    background: #808080;
    text-align: center;
    font-size: 14px;
    color: #FFF;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .pg-tbl {
    margin: 15px 0;
    border-collapse: collapse;
    border: 2px solid blue;
    width: 100%;
  }
  
  .pg-tbl th {
    background: #ccc;
    text-align: center;
  }
  
  .pg-tbl th,
  .pg-tbl td {
    border: 2px solid blue;
    padding: 5px 4px;
    font-size: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;button id="generate"&gt;Generate PDF&lt;/button&gt;
  &lt;div class="pg-section"&gt;
    &lt;h3 class="h3"&gt;User Information&lt;/h3&gt;
    &lt;table id="tbl1" class="pg-tbl"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;User ID&lt;/th&gt;
          &lt;th&gt;First&lt;/th&gt;
          &lt;th&gt;Last&lt;/th&gt;
          &lt;th&gt;Age&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td id="user_id"&gt;5672&lt;/td&gt;
          &lt;td id="first"&gt;John&lt;/td&gt;
          &lt;td id="last"&gt;Kean&lt;/td&gt;
          &lt;td id="age"&gt;29&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
    &lt;h3 class="h3"&gt;Building Information&lt;/h3&gt;
    &lt;table id="tbl9" class="pg-tbl"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th rowspan="2"&gt;Total&lt;/th&gt;
          &lt;th colspan="2"&gt;Range&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;High&lt;/th&gt;
          &lt;th&gt;Low&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td id="total"&gt;45&lt;/td&gt;
          &lt;td id="low"&gt;13&lt;/td&gt;
          &lt;td id="high"&gt;5&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.0/jspdf.debug.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In example above I use <code>jspdf.debug.js</code> and <code>html2canvas.min.js</code> to export div container to PDF file. After file is generated I noticed that pdf looks blurry. I'm wondering how I can fix that? Is there a way to make the pdf look like the original html?</p>