fix(dees-pdf-viewer): account for devicePixelRatio when setting canvas dimensions and scale 2D context to render crisp PDF pages and thumbnails on high-DPI displays

changelog.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2026-01-28 - 3.41.2 - fix(dees-pdf-viewer)
+account for devicePixelRatio when setting canvas dimensions and scale 2D context to render crisp PDF pages and thumbnails on high-DPI displays
+
+- Multiply canvas.width and canvas.height by window.devicePixelRatio (dpr) and use Math.floor to set the actual pixel buffer size
+- Call ctx.scale(dpr, dpr) so drawing is rendered at device pixels while keeping CSS display size unchanged
+- Apply the same high-DPI adjustments to both main page rendering and thumbnail generation
+- Keep canvas.style.width and canvas.style.height set to viewport dimensions to preserve layout
+
 ## 2026-01-27 - 3.41.1 - fix(dataview-codebox)
 fix dees-dataview codebox layout to ensure full-height, proper flex behavior and scrolling; bump internal dependencies
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.41.1',
+  version: '3.41.2',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00group-media/dees-pdf-viewer/component.ts

@@ -444,9 +444,10 @@ export class DeesPdfViewer extends DeesElement {
       const page = await this.pdfDocument.getPage(pageNum);
       const viewport = this.computeViewport(page);
 
-      // Set canvas dimensions
+      // Set canvas dimensions with device pixel ratio for sharp rendering
-      canvas.height = viewport.height;
+      const dpr = window.devicePixelRatio || 1;
-      canvas.width = viewport.width;
+      canvas.width = Math.floor(viewport.width * dpr);
+      canvas.height = Math.floor(viewport.height * dpr);
       canvas.style.width = `${viewport.width}px`;
       canvas.style.height = `${viewport.height}px`;
 
@@ -457,6 +458,9 @@ export class DeesPdfViewer extends DeesElement {
         return;
       }
 
+      // Scale context for high-DPI displays
+      ctx.scale(dpr, dpr);
+
       const renderContext = {
         canvasContext: ctx,
         viewport: viewport,
@@ -652,9 +656,10 @@ export class DeesPdfViewer extends DeesElement {
         const scale = maxThumbnailWidth / initialViewport.width;
         const viewport = page.getViewport({ scale });
 
-        // Set canvas dimensions to actual render size
+        // Set canvas dimensions with device pixel ratio for sharp thumbnails
-        canvas.width = viewport.width;
+        const dpr = window.devicePixelRatio || 1;
-        canvas.height = viewport.height;
+        canvas.width = Math.floor(viewport.width * dpr);
+        canvas.height = Math.floor(viewport.height * dpr);
 
         // Set the display size via style to ensure proper display
         canvas.style.width = `${viewport.width}px`;
@@ -670,6 +675,9 @@ export class DeesPdfViewer extends DeesElement {
           continue;
         }
 
+        // Scale context for high-DPI displays
+        context.scale(dpr, dpr);
+
         const renderContext = {
           canvasContext: context,
           viewport: viewport,