Fix blurry PDF text on mobile Safari by accounting for devicePixelRatio

Canvas was rendered at CSS pixel dimensions, causing blurry upscaling on
high-DPI screens (mobile Safari typically has devicePixelRatio of 2-3).
Now renders at native device resolution and uses CSS to scale the canvas
element back to logical size.

https://claude.ai/code/session_01YcR4QgziQReqarBy3HuxcH

Author: claude

view-pdf.html

@@ -313,8 +313,14 @@ <h2>${title}</h2>
 
             const canvas = document.createElement('canvas');
             const context = canvas.getContext('2d');
-            canvas.height = viewport.height;
-            canvas.width = viewport.width;
+
+            // Render at device pixel resolution for sharp text on high-DPI screens
+            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';
+            context.scale(dpr, dpr);
 
             wrapper.appendChild(canvas);