PhantomJS renders blurry Chart.js canvas

Question

I'm trying to render a report via PhantomJS 2.1.1 where the HTML page contains a chart generated by Chart.js. I have full control over that page. The resulting PDF should be a printable A4. As you can see in the screenshot down below, the chart is very blurry.

Is there any way I can make either Chart.js or PhantomJS render the chart/page at a higher DPI so that the drawn canvas appears nice and sharp?

PhantomJS:

page.property('paperSize', {
  format: 'A4',
  orientation: 'portrait',
  border: '2cm'
});

Chart.js:

var lineChart = new Chart(ctx).Line(data, {
  animation: false,
  responsive: true,
  pointDot: false,
  scaleShowLabels: true,
  showScale: true,
  showTooltips: false,
  bezierCurve : false,
  scaleShowVerticalLines: false
});

Answer 1

Add viewportSize and zoomFactor in your phantomjs page:

await page.property('viewportSize', { height: 1600, width: 3600 });
await page.property('zoomFactor', 4);

and add in your html head template

<script>
  window.devicePixelRatio = 4;
</script>