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

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
-      canvas.height = viewport.height;
-      canvas.width = viewport.width;
+      // Set canvas dimensions with device pixel ratio for sharp rendering
+      const dpr = window.devicePixelRatio || 1;
+      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
-        canvas.width = viewport.width;
-        canvas.height = viewport.height;
+        // Set canvas dimensions with device pixel ratio for sharp thumbnails
+        const dpr = window.devicePixelRatio || 1;
+        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,