feat: hi-DPI rendering, floating palette clamping, and saver.js decomposition

- Render PDF and annotation canvases at native devicePixelRatio for sharp text on hi-DPI displays
- Clamp floating tool palettes within viewport on window resize and app startup
- Use actual palette element dimensions for boundary clamping (supports large icon mode)
- Extract text-edits, watermarks, bookmarks, and utilities from saver.js into saver/ sub-modules

Author: mojtabakarimi

open-pdf-studio/js/annotations/rendering.js

@@ -916,19 +916,21 @@ export function redrawAnnotations(lightweight = false) {
 
   annotationCtx.clearRect(0, 0, annotationCanvas.width, annotationCanvas.height);
 
-  // Apply scale transformation for zooming
+  // Apply scale transformation for zooming (includes hi-DPI factor)
+  const dpr = window.devicePixelRatio || 1;
+  const effectiveScale = scale * dpr;
   annotationCtx.save();
-  annotationCtx.scale(scale, scale);
+  annotationCtx.scale(effectiveScale, effectiveScale);
 
   // Draw grid overlay if enabled
   if (state.preferences.showGrid) {
-    drawGrid(annotationCtx, annotationCanvas.width / scale, annotationCanvas.height / scale);
+    drawGrid(annotationCtx, annotationCanvas.width / effectiveScale, annotationCanvas.height / effectiveScale);
   }
 
   const curPage = doc ? doc.currentPage : 1;
 
   // Draw watermarks behind content
-  renderWatermarksBehind(annotationCtx, curPage, annotationCanvas.width / scale, annotationCanvas.height / scale);
+  renderWatermarksBehind(annotationCtx, curPage, annotationCanvas.width / effectiveScale, annotationCanvas.height / effectiveScale);
 
   // Draw text edits (cover-and-replace) before annotations
   drawTextEdits(annotationCtx, curPage);
@@ -943,7 +945,7 @@ export function redrawAnnotations(lightweight = false) {
   annotationCtx.globalCompositeOperation = 'source-over';
 
   // Draw watermarks in front of content
-  renderWatermarksInFront(annotationCtx, curPage, annotationCanvas.width / scale, annotationCanvas.height / scale);
+  renderWatermarksInFront(annotationCtx, curPage, annotationCanvas.width / effectiveScale, annotationCanvas.height / effectiveScale);
 
   // Draw selection highlight and handles (use selectedAnnotations array as source of truth)
   const _renderDoc = getActiveDocument();
@@ -974,20 +976,22 @@ export function redrawAnnotations(lightweight = false) {
 }
 
 // Render annotations for a specific page (continuous mode)
-export function renderAnnotationsForPage(ctx, pageNum, width, height) {
+export function renderAnnotationsForPage(ctx, pageNum, width, height, overrideDpr) {
   ctx.clearRect(0, 0, width, height);
 
   // Read scale and annotations from the active document directly
   const doc = state.documents[state.activeDocumentIndex];
   const scale = doc ? doc.scale : 1;
   const annotations = doc ? doc.annotations : [];
 
-  // Apply scale transformation for zooming
+  // Apply scale transformation for zooming (includes hi-DPI factor)
+  const dpr = overrideDpr !== undefined ? overrideDpr : (window.devicePixelRatio || 1);
+  const effectiveScale = scale * dpr;
   ctx.save();
-  ctx.scale(scale, scale);
+  ctx.scale(effectiveScale, effectiveScale);
 
   // Draw watermarks behind content
-  renderWatermarksBehind(ctx, pageNum, width / scale, height / scale);
+  renderWatermarksBehind(ctx, pageNum, width / effectiveScale, height / effectiveScale);
 
   // Draw text edits (cover-and-replace)
   drawTextEdits(ctx, pageNum);
@@ -998,7 +1002,7 @@ export function renderAnnotationsForPage(ctx, pageNum, width, height) {
   });
 
   // Draw watermarks in front of content
-  renderWatermarksInFront(ctx, pageNum, width / scale, height / scale);
+  renderWatermarksInFront(ctx, pageNum, width / effectiveScale, height / effectiveScale);
 
   // Restore context
   ctx.restore();

open-pdf-studio/js/annotations/stamps.js

@@ -130,8 +130,9 @@ export async function placeOverrideStamp(x, y) {
     const canvas = document.getElementById('annotation-canvas') || document.getElementById('pdf-canvas');
     const doc = getActiveDocument();
     const stampScale = doc?.scale || 1.5;
-    const pageW = canvas ? canvas.width / stampScale : 600;
-    const pageH = canvas ? canvas.height / stampScale : 800;
+    const dpr = window.devicePixelRatio || 1;
+    const pageW = canvas ? canvas.width / (stampScale * dpr) : 600;
+    const pageH = canvas ? canvas.height / (stampScale * dpr) : 800;
     const margin = overrides.stampPageMargin || 20;
     stampWidth = Math.round(pageW - margin * 2);
     stampHeight = Math.round(pageH - margin * 2);

open-pdf-studio/js/pdf/exporter.js

@@ -81,7 +81,7 @@ export async function renderPageOffscreen(pageNum, exportScale) {
   const savedScale = state.documents[state.activeDocumentIndex].scale;
   state.documents[state.activeDocumentIndex].scale = exportScale;
 
-  renderAnnotationsForPage(annCtx, pageNum, annCanvas.width, annCanvas.height);
+  renderAnnotationsForPage(annCtx, pageNum, annCanvas.width, annCanvas.height, 1);
 
   // Restore original scale
   state.documents[state.activeDocumentIndex].scale = savedScale;

open-pdf-studio/js/pdf/renderer.js

@@ -15,6 +15,17 @@ import { clearPdfVectorCache, prefetchPdfVectorGeometry } from '../tools/pdf-sna
 import { clearDetectionCache } from '../tools/pdf-element-detector.js';
 import { onPageRendered, clearHighlights } from '../search/find-bar.js';
 
+// Hi-DPI support: render canvases at device pixel ratio for sharp text
+export function getCanvasDPR() { return window.devicePixelRatio || 1; }
+
+function setupCanvasHiDPI(canvas, width, height) {
+  const dpr = getCanvasDPR();
+  canvas.width = Math.floor(width * dpr);
+  canvas.height = Math.floor(height * dpr);
+  canvas.style.width = Math.floor(width) + 'px';
+  canvas.style.height = Math.floor(height) + 'px';
+}
+
 // Track current render task to cancel if needed
 let currentRenderTask = null;
 
@@ -55,11 +66,9 @@ export async function renderPage(pageNum) {
   const annotationCanvas = getAnnotationCanvas();
   if (!pdfCanvas || !annotationCanvas) return;
 
-  // Set canvas dimensions
-  pdfCanvas.width = viewport.width;
-  pdfCanvas.height = viewport.height;
-  annotationCanvas.width = viewport.width;
-  annotationCanvas.height = viewport.height;
+  // Set canvas dimensions (hi-DPI: buffer at dpr, CSS at logical size)
+  setupCanvasHiDPI(pdfCanvas, viewport.width, viewport.height);
+  setupCanvasHiDPI(annotationCanvas, viewport.width, viewport.height);
 
   // Set CSS scale variables for PDF.js text/annotation layers
   const container = document.getElementById('canvas-container');
@@ -70,9 +79,11 @@ export async function renderPage(pageNum) {
 
   // Render PDF page
   const ctx = pdfCanvas.getContext('2d');
+  const dpr = getCanvasDPR();
   const renderContext = {
     canvasContext: ctx,
     viewport: viewport,
+    transform: dpr !== 1 ? [dpr, 0, 0, dpr, 0, 0] : null,
     annotationMode: 0 // DISABLE - annotations are rendered by the app's overlay canvas
   };
 
@@ -172,20 +183,18 @@ async function renderContinuousPage(pageNum) {
   canvasContainer.style.setProperty('--scale-factor', viewport.scale);
   canvasContainer.style.setProperty('--total-scale-factor', viewport.scale);
 
-  // Create PDF canvas
+  // Create PDF canvas (hi-DPI)
   const pdfCanvasEl = document.createElement('canvas');
   pdfCanvasEl.className = 'pdf-canvas';
-  pdfCanvasEl.width = viewport.width;
-  pdfCanvasEl.height = viewport.height;
+  setupCanvasHiDPI(pdfCanvasEl, viewport.width, viewport.height);
   pdfCanvasEl.dataset.page = pageNum;
   pdfCanvasEl.style.display = 'block';
   pdfCanvasEl.style.background = 'white';
 
-  // Create annotation canvas
+  // Create annotation canvas (hi-DPI)
   const annotationCanvasEl = document.createElement('canvas');
   annotationCanvasEl.className = 'annotation-canvas';
-  annotationCanvasEl.width = viewport.width;
-  annotationCanvasEl.height = viewport.height;
+  setupCanvasHiDPI(annotationCanvasEl, viewport.width, viewport.height);
   annotationCanvasEl.dataset.page = pageNum;
   annotationCanvasEl.style.position = 'absolute';
   annotationCanvasEl.style.top = '0';
@@ -202,9 +211,11 @@ async function renderContinuousPage(pageNum) {
 
   // Render PDF page
   const pdfCtxEl = pdfCanvasEl.getContext('2d');
+  const contDpr = getCanvasDPR();
   const contRenderContext = {
     canvasContext: pdfCtxEl,
     viewport: viewport,
+    transform: contDpr !== 1 ? [contDpr, 0, 0, contDpr, 0, 0] : null,
     annotationMode: 0
   };
   if (state.preferences.thinLines) {