From b39cd706a66a750a9c8ccff7ea86d48b614a9eba Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Tue, 7 Sep 2021 14:43:53 +0200
Subject: [PATCH] Update the `learning/` examples with basic HiDPI-screen
 support

This is essentially a simplified version of the code that's used in `PDFPageView`, which will hopefully reduce the number of issues opened specifically about blurry rendering.
However, note that *ideally* users should base their implementations on the `components/` examples rather than using the API directly (the "viewer components" already support HiDPI-screens).
---
 docs/contents/examples/index.md     | 14 ++++++++++++--
 examples/learning/helloworld.html   | 14 ++++++++++++--
 examples/learning/helloworld64.html | 14 ++++++++++++--
 examples/learning/prevnext.html     | 14 ++++++++++++--
 4 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/docs/contents/examples/index.md b/docs/contents/examples/index.md
index 26badb038..5430549f1 100644
--- a/docs/contents/examples/index.md
+++ b/docs/contents/examples/index.md
@@ -44,14 +44,24 @@ Each PDF page has its own viewport which defines the size in pixels(72DPI) and i
 ```js
 var scale = 1.5;
 var viewport = page.getViewport({ scale: scale, });
+// Support HiDPI-screens.
+var outputScale = window.devicePixelRatio || 1;
 
 var canvas = document.getElementById('the-canvas');
 var context = canvas.getContext('2d');
-canvas.height = viewport.height;
-canvas.width = viewport.width;
+
+canvas.width = Math.floor(viewport.width * outputScale);
+canvas.height = Math.floor(viewport.height * outputScale);
+canvas.style.width = Math.floor(viewport.width) + "px";
+canvas.style.height =  Math.floor(viewport.height) + "px";
+
+var transform = outputScale !== 1
+  ? [outputScale, 0, 0, outputScale, 0, 0]
+  : null;
 
 var renderContext = {
   canvasContext: context,
+  transform: transform,
   viewport: viewport
 };
 page.render(renderContext);
diff --git a/examples/learning/helloworld.html b/examples/learning/helloworld.html
index acd81709a..8bcbbaf64 100644
--- a/examples/learning/helloworld.html
+++ b/examples/learning/helloworld.html
@@ -36,20 +36,30 @@
     pdf.getPage(1).then(function(page) {
       var scale = 1.5;
       var viewport = page.getViewport({ scale: scale, });
+      // Support HiDPI-screens.
+      var outputScale = window.devicePixelRatio || 1;
 
       //
       // Prepare canvas using PDF page dimensions
       //
       var canvas = document.getElementById('the-canvas');
       var context = canvas.getContext('2d');
-      canvas.height = viewport.height;
-      canvas.width = viewport.width;
+
+      canvas.width = Math.floor(viewport.width * outputScale);
+      canvas.height = Math.floor(viewport.height * outputScale);
+      canvas.style.width = Math.floor(viewport.width) + "px";
+      canvas.style.height =  Math.floor(viewport.height) + "px";
+
+      var transform = outputScale !== 1
+        ? [outputScale, 0, 0, outputScale, 0, 0]
+        : null;
 
       //
       // Render PDF page into canvas context
       //
       var renderContext = {
         canvasContext: context,
+        transform: transform,
         viewport: viewport,
       };
       page.render(renderContext);
diff --git a/examples/learning/helloworld64.html b/examples/learning/helloworld64.html
index 972e21326..eb3a3a897 100644
--- a/examples/learning/helloworld64.html
+++ b/examples/learning/helloworld64.html
@@ -45,16 +45,26 @@
     pdf.getPage(1).then(function(page) {
       var scale = 1.5;
       var viewport = page.getViewport({ scale: scale, });
+      // Support HiDPI-screens.
+      var outputScale = window.devicePixelRatio || 1;
 
       // Prepare canvas using PDF page dimensions.
       var canvas = document.getElementById('the-canvas');
       var context = canvas.getContext('2d');
-      canvas.height = viewport.height;
-      canvas.width = viewport.width;
+
+      canvas.width = Math.floor(viewport.width * outputScale);
+      canvas.height = Math.floor(viewport.height * outputScale);
+      canvas.style.width = Math.floor(viewport.width) + "px";
+      canvas.style.height =  Math.floor(viewport.height) + "px";
+
+      var transform = outputScale !== 1
+        ? [outputScale, 0, 0, outputScale, 0, 0]
+        : null;
 
       // Render PDF page into canvas context.
       var renderContext = {
         canvasContext: context,
+        transform: transform,
         viewport: viewport,
       };
       page.render(renderContext);
diff --git a/examples/learning/prevnext.html b/examples/learning/prevnext.html
index a4366f54d..cf5d1c937 100644
--- a/examples/learning/prevnext.html
+++ b/examples/learning/prevnext.html
@@ -53,12 +53,22 @@
     // Using promise to fetch the page
     pdfDoc.getPage(num).then(function(page) {
       var viewport = page.getViewport({ scale: scale, });
-      canvas.height = viewport.height;
-      canvas.width = viewport.width;
+      // Support HiDPI-screens.
+      var outputScale = window.devicePixelRatio || 1;
+
+      canvas.width = Math.floor(viewport.width * outputScale);
+      canvas.height = Math.floor(viewport.height * outputScale);
+      canvas.style.width = Math.floor(viewport.width) + "px";
+      canvas.style.height =  Math.floor(viewport.height) + "px";
+
+      var transform = outputScale !== 1
+        ? [outputScale, 0, 0, outputScale, 0, 0]
+        : null;
 
       // Render PDF page into canvas context
       var renderContext = {
         canvasContext: ctx,
+        transform: transform,
         viewport: viewport,
       };
       var renderTask = page.render(renderContext);