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

  1. 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).
  2. 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.

CommentFileSizeAuthor
#4 after_patch.png755.52 KBmacsim
#4 before_patch.png646.55 KBmacsim

Issue fork pdf_reader-3608740

Command icon 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

macsim created an issue. See original summary.

macsim’s picture

Status: Active » Needs review
macsim’s picture

StatusFileSize
new646.55 KB
new755.52 KB