From 0936c78779ed7caeb84840f306dc18f3a33ca181 Mon Sep 17 00:00:00 2001
From: MickaelK <mickael@kerjean.me>
Date: Mon, 18 Nov 2024 12:49:10 +1100
Subject: [PATCH] fix (pdf): pdfjs on retina screen

whenever using a retina typed screen, the PDF rendering would appear as
blurry. With this trick we largely improve rendering on those type of
screen
---
 public/assets/pages/viewerpage/application_pdf.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/public/assets/pages/viewerpage/application_pdf.js b/public/assets/pages/viewerpage/application_pdf.js
index 9f2b8273..d59535f6 100644
--- a/public/assets/pages/viewerpage/application_pdf.js
+++ b/public/assets/pages/viewerpage/application_pdf.js
@@ -63,6 +63,7 @@ async function ctrlPDFJs(render) {
             for (let i=0; i<pdf.numPages; i++) {
                 const page = await pdf.getPage(i + 1);
                 const marginLeftRight = (document.body.clientWidth > 600 ? 50 : 15);
+                const ratio = window.devicePixelRatio || 1;
                 const viewport = page.getViewport({
                     scale: Math.min(
                         Math.max(
@@ -70,11 +71,13 @@ async function ctrlPDFJs(render) {
                             0,
                         ),
                         800,
-                    ) / page.getViewport({ scale: 1 }).width,
+                    ) / page.getViewport({ scale: 1 / ratio }).width,
                 });
                 const $canvas = document.createElement("canvas");
                 $canvas.height = viewport.height;
                 $canvas.width = viewport.width;
+                $canvas.style.width = Math.floor(viewport.width / ratio) + "px";
+                $canvas.style.height = Math.floor(viewport.height / ratio) + "px";
                 $container.appendChild($canvas);
                 if (window.env === "test") $canvas.getContext = () => null;
                 await page.render({