GitHub user christianalberto deleted a comment on the discussion: New tag with
fixes to align with Google composer
Hey there! I completely get the frustration—this is a classic headache when
working with PDF.js.
The blurriness isn't actually an issue with your PDF file or the library
itself. It comes down to how the HTML5 <canvas> element handles High-DPI
screens (like Retina displays, 4K monitors, or when browser zoom is applied).
By default, if you set a canvas to 800x600 pixels, a high-density screen will
simply stretch those base pixels to fill the physical space, resulting in that
blurry or "fuzzy" text look.
The Fix: Factor in window.devicePixelRatio
To get sharp rendering like the browser's native PDF viewer, you need a quick
two-step approach:
Multiply the internal resolution of the canvas by the screen's pixel density
(window.devicePixelRatio).
Keep the visual CSS size set to the standard viewport dimensions.
This forces the canvas to render a much higher-density image inside the same
physical space on screen.
The Code You Need
Here’s how your render function should look:
```JavaScript
pdfDoc.getPage(pageNumber).then((page) => {
const canvas = document.getElementById('pdf-canvas');
const context = canvas.getContext('2d');
// 1. Grab the screen's pixel density (defaults to 1)
const dpr = window.devicePixelRatio || 1;
const scale = 1.5; // Your desired base zoom level
// 2. Get the logical viewport size
const viewport = page.getViewport({ scale: scale });
// 3. Create a high-res viewport for rendering
const outputScale = page.getViewport({ scale: scale * dpr });
// 4. Increase internal canvas pixel resolution
canvas.width = Math.floor(viewport.width * dpr);
canvas.height = Math.floor(viewport.height * dpr);
// 5. Lock the visible display size via CSS
canvas.style.width = `${Math.floor(viewport.width)}px`;
canvas.style.height = `${Math.floor(viewport.height)}px`;
// 6. Render using the high-res viewport
const renderContext = {
canvasContext: context,
viewport: outputScale,
};
page.render(renderContext);
});
```
**A Couple of Heads-Ups**
Watch out for memory: Increasing the internal pixel grid means the canvas uses
2x–4x more RAM/GPU memory. If you're building a long multi-page scroll view,
make sure to clean up or unrender offscreen canvases.
Display changes / Zooming: If a user drags the browser window to a secondary
monitor with a different resolution, window.devicePixelRatio changes. If you
want to make it super polished, you can listen for pixel ratio changes and
re-trigger the render function.
Awesome! If this solution solves the issue for you, feel free to hit "Mark as
answer" on the thread so others facing the same issue can find it easily! 🚀
GitHub link:
https://github.com/apache/airflow/discussions/71532#discussioncomment-18003571
----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to: [email protected]
