Chartjs + jsPDF = Blurry image
<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>