fix(pdf-server): Sharp rendering on retina displays

Account for devicePixelRatio when rendering canvas:
- Scale canvas dimensions by dpr
- Scale context by dpr
- Keep CSS size at logical pixels

Author: ochafik

examples/pdf-server/src/mcp-app.ts

@@ -317,16 +317,21 @@ async function renderPage() {
     const page = await pdfDocument.getPage(pageToRender);
     const viewport = page.getViewport({ scale });
 
-    // Get fresh context and clear canvas
+    // Account for retina displays
+    const dpr = window.devicePixelRatio || 1;
     const ctx = canvasEl.getContext("2d")!;
-    ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
 
-    // Set canvas dimensions
-    canvasEl.width = viewport.width;
-    canvasEl.height = viewport.height;
+    // Set canvas size in pixels (scaled for retina)
+    canvasEl.width = viewport.width * dpr;
+    canvasEl.height = viewport.height * dpr;
+
+    // Set display size in CSS pixels
     canvasEl.style.width = `${viewport.width}px`;
     canvasEl.style.height = `${viewport.height}px`;
 
+    // Scale context for retina
+    ctx.scale(dpr, dpr);
+
     // Clear and setup text layer
     textLayerEl.innerHTML = "";
     textLayerEl.style.width = `${viewport.width}px`;