html2canvasとjsPDFを利用したcanvasのpdf化(画質)について

chartjsを利用し、グラフを作成しています。
そのグラフをhtml2canvasとjsPDFを利用しpdf化していますが、スクショしたpngをpdf化したpdfより画質が荒いです。
何か解決策ご存知でしょうか？解決策がなければ、他のライブラリ等、何かアイデアはございますでしょうか？
これ以上画質をあげることはできない等、ご教授いただけると幸いです。

下記がスクショになります。

下記がコードです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Document</title>
</head>
<style>
  .box1 {
    min-width: 900px;
    max-width: 1000px;
    border: 0.1px solid black;
    background-color: white;
    box-shadow: 0 0 8px gray;
    border-radius: 6px;
    height:310px;
  }
  
  .content {
    background-color: #E5E5E5;
  }
  
    </style>
    <body>
      <div class="content" id="reportPage" style="width=100%;height=100%;overflow-x: scroll; min-width:1400px;">
        <div id="top" style="overflow-x:scroll;">
          <header id="header">
            <div class="container">
                <div class="row justify-content-center" style="min-width:1000px;">
                  <div class="col-4" style="min-width:100px;">
                    <div class="row"> 
                      <div class="col-4" style="min-width:100px;">
                        <a onclick="downloadImage()">PDF</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
          </header>
          <main>
            <div class="container-fluid">
              <!-- 1列目 -->
              <div class="row justify-content-center mt-5">
                <div class="col-8 pl-5 pr-5 align-self-start">
                    <div class="row box1 pt-4 mb-3">
                      <div class="col-5">
                        <div style="min-width:100%;" class="">
                          <h3 style="font-size:13px; padding-left:20px;">test</h3>
                        </div>
                        <div id="graph" style="width:360px; height:250px; padding-left:0px; position:relative" class="">
                            <canvas id="chartF1" style="width:360px; height:250px;"></canvas>
                        </div>
                      </div>
                    </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
  
  <script>
    var ctx = document.getElementById("chartF1").getContext("2d"); 
    var gradient = ctx.createLinearGradient(0, 0, 0, 400);
    gradient.addColorStop(0, 'rgba(241, 126, 119, 1)');
    gradient.addColorStop(1, 'rgba(255, 205, 147, 1)');
    var ctx2 = document.getElementById("chartF1").getContext("2d"); 
    var gradient2 = ctx2.createLinearGradient(0, -50, 0, 200);
    gradient2.addColorStop(0, 'rgba(47, 168, 255, 1)');
    gradient2.addColorStop(1, 'rgba(131, 246, 212, 1)');
    var $ctxF1 = $("#chartF1");
    if ($ctxF1.length) {
      var mychartC2 = new Chart($ctxF1, {
        type: 'bar',
        data: {
          labels: ["test1", "test2", "test3", "test4"],
          datasets: [
            {
              label: 'test',
              data: ['1','2','3','4'],
              backgroundColor: gradient,
              borderColor: gradient,
              pointBackgroundColor: gradient,
            },
          ]
        },
        options: {
          responsive: true,
          legend: {
            display: true,
            position: 'top',
            labels: {
              fontSize: 10
          } 
          },
          title: {
            display: false
          },
          scales: {
            yAxes: [{
              display: true,
              ticks: {
                fontSize: 10,
                min: 0
              }
            }],
            xAxes: [{
              ticks: {
                fontSize: 10
              },
            }]
          }
        }
      });
    }
function downloadImage() {
  html2canvas(document.body, {
   onrendered: function(canvas) {
    var dataURI = canvas.toDataURL();
    var pdf = new jsPDF({
      format: 'a4',
    });
    // 横幅をぴったり合わせたかったので横幅を取得して指定してます
    var width = pdf.internal.pageSize.width;
    pdf.addImage(canvas, 'JPEG', 0, 0, width, 0);
    pdf.save('test.pdf')
   }
  });
}
  </script>
</body>
</html>