Pdf image quality is bad using pdf.js

Question

I am using pdf.js.

But, image quality of PDF is low quality.

Please tell me solution method.

var TARGET_PAGE = 1; 
var PAGE_SCALE = 1; 

function viewPDF(targetPage,pageScale){

PDFJS.getDocument(targetPath).then(function (pdf) {
    return pdf.getPage(targetPage);
}).then(function (page) {
    var scale = pageScale;
    var viewport = page.getViewport(scale);
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    var renderContext = {
        canvasContext: context,
        viewport: viewport
    };
    page.render(renderContext);
        document.body.appendChild(canvas);
});
}

Answer 1

Just put the canvas inside a wrapper <div>, and set its rendered size relative to the wrapper. Then you can set the logical size of the canvas as large as the viewport to achieve high dpi without changing its actual size on the screen. For example,

var scale = 5;
var viewport = page.getViewport(scale);
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = "100%";
canvas.style.height = "100%";
wrapper.style.width = Math.floor(viewport.width/scale) + 'pt';
wrapper.style.height = Math.floor(viewport.height/scale) + 'pt';

Answer 2

I've had the same issue. Just changed 'scale' attribute from 1 to 2 and the quality went way up.

pdfDoc.getPage(1)
  .then(function (page) {
       var canvas = document.getElementById('myCanvas');
       var ctx = canvas.getContext('2d');

       var viewport = page.getViewport(2); // 2 is the 'scale' attr
       canvas.height = viewport.height;
       canvas.width = viewport.width;

       var renderContext = {
              canvasContext: ctx,
              viewport: viewport
       };

       page.render(renderContext);
});