chartjs canvas to pdf coming out blurry

I am using jspdf to convert chartjs canvases into a single pdf. But the outcome is very blurry.How do I fix this? I followed this to convert the canvas into pdf.

<div class="row">
    <div class="col-md-6">
        <canvas class="selected" id="myChart1" width="100" height="75"></canvas>
    </div>
    <div class="col-md-6">
        <canvas class="selected" id="myChart2" width="100" height="75"></canvas>
    </div>
    <div class="col-md-6">
        <canvas class="selected" id="myChart3" width="100" height="75"></canvas>
    </div>    
</div>

$('#downloadPdf').click(function(event) {
    var PageHeight = $('.row').innerHeight();
    var PageWidth = $('.row').innerWidth();
    var pdfCanvas = $('<canvas />').attr({
      id: "canvaspdf",
      width: PageWidth,
      height: PageHeight
    });
    var scale = window.devicePixelRatio;
    var pdfctx = $(pdfCanvas)[0].getContext('2d');

    var pdfctxX = 0;
    var pdfctxY = 0;
    var buffer = 0;
    $("canvas.selected").each(function(index) {
      var canvasHeight = $(this).innerHeight();
      var canvasWidth = $(this).innerWidth();
      pdfctx.drawImage($(this)[0], pdfctxX, pdfctxY, canvasWidth, canvasHeight);
      pdfctxX += canvasWidth + buffer;
      if (index % 2 === 1) {
        pdfctxX = 0;
        pdfctxY += canvasHeight + buffer;
      }
    });
    var pdf = new jsPDF('l', 'pt', [PageWidth, PageHeight]);
    pdf.addImage($(pdfCanvas)[0], 'PNG', 0, 0);    
    pdf.save('file.pdf');
});