PDF.js scale PDF on fixed width

javascript, mozilla, pdf, pdf.js

Solution

I updated the example from the Pdf.js github http://jsbin.com/pdfjs-prevnext-v2/edit#html,live to scale properly to a fixed canvas width. See http://jsfiddle.net/RREv9/ for my code.

The important line is

var viewport = page.getViewport(canvas.width / page.getViewport(1.0).width);

because the expression `canvas.width / page.getViewport(1.0).width` gives us the appropriate scaling factor.

You should change the width of your canvas not with css but by the `width` attribute of the canvas. See Canvas width and height in HTML5

Problem

I have a fixed box where I want to display my PDF's in rendered by PDF.js. As PDF.js documentation is not really accessible (spitting through their source files), I'd like to know whether it's possible to scale a rendered PDF on a fixed width. When I set as CSS: `canvas { width: 600px; }` for the canvas displaying the PDF, the PDF gets stretched, and the quality gets poor.

Original source

Related problems