title: Chartjs + jsPDF = Blurry image
body: <p>I'm having some issues exporting my Charts to PDF. </p>
  
  <p>I have this div</p>
  
  <pre><code>    &lt;div id="chart-area"&gt;
      &lt;button type="button" id="btnPrint_" onClick="Print1()"&gt;Print&lt;/button&gt;
      &lt;?php echo '&lt;h2 id="title"&gt;'.$_SESSION['team_name'].'&lt;/h2&gt;'; ?&gt;
          &lt;canvas id="myChart" width="800" height="400"&gt;&lt;/canvas&gt;
          &lt;div id="legend"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>and I'm creating my chart using ChartJS</p>
  
  <pre><code>$( document ).ready(function(){
      var helpers = Chart.helpers;
      var canvas = document.getElementById('myChart');
      var data = {
          labels: unique_dates,
          datasets: [
              {
                  label: "Ticket Count",
                  fillColor: "rgba(107, 110, 111, 0.6)",
                  strokeColor: "rgba(107, 110, 111, 0.6)",
                  highlightFill: "rgba(107, 110, 111, 0.6)",
                  highlightStroke: "rgba(151,137,200,1)",
                  data: ticket_count
              },
              {
                  label: "Subsidy Count",
                  fillColor: "rgba(8, 126, 210,0.5)",
                  strokeColor: "rgba(8, 126, 210,0.8)",
                  highlightFill: "rgba(220,220,220,0.75)",
                  highlightStroke: "rgba(220,220,220,1)",
                  data: subsidy_count
              }
          ]
      }
  
  
    var bar = new Chart(canvas.getContext('2d')).Bar(data, {
    tooltipTemplate: "&lt;%if (label){%&gt;&lt;%=label%&gt;: &lt;%}%&gt;&lt;%= value %&gt;kb",
    animation: true,
  });
  // 
  var legendHolder = document.createElement('div');
  legendHolder.innerHTML = bar.generateLegend();
  
  document.getElementById('legend').appendChild(legendHolder.firstChild); 
  
  });
  </code></pre>
  
  <p>When I click the <strong>btnPrint_</strong> Button I want to export my chart as PDF</p>
  
  <p>like this </p>
  
  <pre><code>function Print1() {
              var title = $("#title").text();
              var doc = new jsPDF('l', 'mm',[210, 297]);
             html2canvas($("#myChart"), {
                  onrendered: function(canvas) {         
                      var imgData = canvas.toDataURL('image/png',1.0);                  
                      doc.text(130,15,title+" GT Log");
                      doc.addImage(imgData, 'PNG',20,30,0,130); 
                      doc.addHTML(canvas);
                      doc.save(title+'gt_log.pdf');             
                      }       
              });
  
  }
  </code></pre>
  
  <p>The problem is that my chart is totally blurry in the pdf file. </p>
  
  <p>Any idea how to fix this?</p>
  
  <p>it's the first time that I'm using ChartJS and jsPDF so probably I'm doing something wrong.</p>
  
  <p>Thanks!</p>