Problem/Motivation
On high-density displays (Retina, AMOLED, any screen with a devicePixelRatio greater than 1), PDF pages rendered through pdf.js appear blurry and pixelated. The higher the pixel ratio (2× on most modern phones, 3× on premium Android devices), the worse the degradation.
The root cause is in js/viewer.js: the canvas physical buffer is set directly from the pdf.js viewport dimensions, with no account for the device pixel ratio. When devicePixelRatio > 1, the browser stretches that low-resolution buffer to fill the CSS area, producing a blurry result.
canvas.width = viewport.width;
canvas.height = viewport.height;
var ctx = canvas.getContext('2d');
Steps to reproduce
- Open a page that renders a PDF through the pdf_reader module on a device or browser with
window.devicePixelRatio >= 2(any modern smartphone, or a desktop browser with OS display scaling enabled). - Observe that text and lines in the rendered PDF are blurry.
Proposed resolution
Scale the physical canvas buffer by devicePixelRatio, keep the CSS dimensions at logical pixels, and apply the same scale factor to the 2D rendering context so pdf.js draws at full resolution:
var pixelRatio = window.devicePixelRatio || 1;
canvas.width = Math.floor(viewport.width * pixelRatio);
canvas.height = Math.floor(viewport.height * pixelRatio);
canvas.style.width = viewport.width + 'px';
canvas.style.height = viewport.height + 'px';
var ctx = canvas.getContext('2d');
ctx.scale(pixelRatio, pixelRatio);
This change is purely additive: on standard 1× screens devicePixelRatio equals 1, so behaviour is unchanged.
Remaining tasks
- Apply the fix to
js/viewer.js - Test on 1×, 2× and 3× screens
User interface changes
PDF pages render sharply on high-DPI screens instead of appearing blurry.
API changes
None.
Data model changes
None.
| Comment | File | Size | Author |
|---|---|---|---|
| #4 | after_patch.png | 755.52 KB | macsim |
| #4 | before_patch.png | 646.55 KB | macsim |
Issue fork pdf_reader-3608740
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
macsim commentedComment #4
macsim commented