Pdf image quality is poor when using pdf.js

Question

I am using pdf.js.

But PDF image quality is poor.

Please tell me the 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 place the canvas inside the wrapper <div>and set its visualized size relative to the wrapper. You can then set the logical size of the canvas to the size of the viewport to achieve high dots per inch 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

PAGE_SCALE = 1. , px PDF ( 1/72 ). PDF - 612x792. 110-146 dpi. 3008x1692, 2,0-5,0 .

, , - CSS CANVAS. CSS CANVAS , . (. Retina: ?)

Answer 3

. "scale" 1 2, .

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);
});