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

@@ -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);

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);

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);

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;
+      // Support HiDPI-screens.
-      canvas.width = viewport.width;
+      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);