From a6014ae88c5cc77cfc2a0554f161dc1ab9dda539 Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Sat, 6 Jun 2026 10:44:58 +0200
Subject: [PATCH] Improve PDF rendering quality and HiDPI support

Enhanced thumbnail rendering in `envelope-viewer.css` by adding `image-rendering` properties for better visual quality.

Updated `pdf-viewer.js` to support high-quality rendering with HiDPI support:
- Replaced fixed scale with dynamic scaling using `devicePixelRatio` (capped at 2x) and a base scale of 0.75.
- Adjusted canvas resolution to match scaled viewport dimensions.
- Removed inline canvas styles to delegate display size to CSS.
- Retained high-quality rendering settings for the canvas context.

These changes improve visual fidelity while maintaining performance.
---
 .../wwwroot/css/envelope-viewer.css           |  2 ++
 .../wwwroot/js/pdf-viewer.js                  | 19 ++++++++++++++-----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css b/EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css
index fc135292..f3e5877b 100644
--- a/EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css
+++ b/EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css
@@ -182,6 +182,8 @@ body.resizing {
     height: 100%;
     object-fit: contain;
     object-position: center;
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: crisp-edges;
 }
 
 .pdf-thumbnail__label {
diff --git a/EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js b/EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js
index affb4385..cf5556b3 100644
--- a/EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js
+++ b/EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js
@@ -255,16 +255,25 @@ window.pdfViewer = {
             }
 
             const page = await this.pdfDoc.getPage(pageNum);
-            // Use higher scale for better quality (0.5 instead of 0.2)
-            // CSS will scale it down but maintain sharpness
-            const viewport = page.getViewport({ scale: 0.5 });
             
-            canvas.height = viewport.height;
+            // High-quality rendering with HiDPI support
+            const dpr = window.devicePixelRatio || 1;
+            const baseScale = 0.75; // Increased base scale for better quality
+            const scale = baseScale * Math.min(dpr, 2); // Cap at 2x for performance
+            
+            const viewport = page.getViewport({ scale: scale });
+            
+            // Set actual canvas pixel dimensions (internal resolution)
             canvas.width = viewport.width;
+            canvas.height = viewport.height;
+            
+            // Remove any inline styles - let CSS handle display size
+            canvas.style.width = '';
+            canvas.style.height = '';
 
             const ctx = canvas.getContext('2d');
             
-            // Enable high-quality rendering
+            // Enable maximum quality rendering
             ctx.imageSmoothingEnabled = true;
             ctx.imageSmoothingQuality = 'high';