@@ -84,6 +84,7 @@ instead. These files are left out of the offline cache.
 | Layer | Where | What |
 | --- | --- | --- |
 | Rendering | `src/lib/pdfjs.ts`, `src/components/PageView.tsx` | [pdf.js](https://mozilla.github.io/pdf.js/) renders pages to canvas plus a selectable text layer. Pages are rendered lazily as they scroll into view. |
+| Background drawing | `src/lib/render/` | Documents whose pages are slow to draw (plans, maps) get a second pdf.js instance in a worker that paints into an `OffscreenCanvas`; pictures come back as `ImageBitmap`s. Pages that need SVG filters (luminosity soft masks, transfer functions) are drawn on the main thread. Experimental, can be turned off in Preferences. |
 | Editing | `src/lib/pdfOps.ts` | [@cantoo/pdf-lib](https://github.com/cantoo-scribe/pdf-lib) (a maintained pdf-lib fork with encryption and incremental saving) implements every document change as `bytes → bytes`: page operations, watermarks, headers/footers, metadata, forms and annotation export. DOM-free and unit-tested. |
 | Annotations I/O | `src/lib/appearance.ts`, `src/lib/annotIO.ts` | Every annotation gets an appearance stream. Saving writes native PDF annotations (`/Highlight`, `/Ink`, `/FreeText`, …); flattening paints the same appearance into the page. On open, supported annotations from any producer are imported for editing. |
 | Fonts | `src/lib/fonts.ts`, `src/lib/subset.ts` | Added text uses a Noto fallback stack (Noto Sans and Symbols 2 bundled; CJK fetched on demand), subset with HarfBuzz `hb-subset` (WebAssembly). |
@@ -112,6 +113,7 @@ PDF-XChange Editor, and what comes next is in [ROADMAP.md](ROADMAP.md).
 
 ### View & navigate
 - Continuous scrolling, lazy page rendering, HiDPI canvases
+- Complex pages (plans, maps) are drawn in a background thread, so scrolling and zooming stay smooth while they draw (experimental; File → Preferences; uses more memory)
 - Zoom in/out, presets, fit width, fit page, Ctrl+wheel zoom
 - Hand (pan), Select Text and Edit Comments tools, text selection & copy
 - Snapshot tool: drag a box to copy that part of the page (with comments) to the clipboard as an image; copy/save a whole page as an image
 
@@ -1,16 +1,17 @@
 import { memo, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { AnnotationMode, TextLayer } from 'pdfjs-dist';
+import { TextLayer } from 'pdfjs-dist';
 import { useStore } from '../store/store';
 import { viewSize } from '../lib/geometry';
 import { AnnotationLayer } from './AnnotationLayer';
 import { WidgetLayer } from './WidgetLayer';
 import { ContentLayer } from './ContentLayer';
 import { registerTextLayer } from '../lib/textSelection';
-import { PRIORITY, renderSlot } from '../lib/renderQueue';
+import { PRIORITY } from '../lib/renderQueue';
 import { docKey, keepCanvas, takeCanvas } from '../lib/pageCache';
 import { TextBoxLayer } from './TextBoxSelect';
 import { useContextMenu } from './Menu';
 import { pageMenu } from './contextMenus';
+import { drawPage } from '../lib/render/draw';
 
 /** Upper bound for a page canvas, as in pdf.js's viewer (2^24 pixels). */
 const MAX_CANVAS_PIXELS = 16777216;
@@ -121,7 +122,6 @@ export const PageView = memo(function PageView({ index, visible }: Props) {
     let cancelled = false;
     let renderTask: { cancel(): void } | null = null;
     let building: TextLayer | null = null;
-    let endMain = () => {};
     (async () => {
       try {
         // Re-rendering an already drawn page (zoom, edits): wait until the zoom settles;
@@ -133,30 +133,20 @@ export const PageView = memo(function PageView({ index, visible }: Props) {
         const page = await pdf.getPage(index + 1);
         if (cancelled) return;
         if (drawCanvas) {
-          const slot = renderSlot(PRIORITY.page);
-          endMain = slot.done;
-          await slot.ready;
-          if (cancelled) return;
           // Like pdf.js's viewer, limit the canvas size: huge canvases (high zoom on a
           // high-density screen) are slow to draw and can exhaust the browser's memory.
           const css = page.getViewport({ scale, rotation: geom.rotation });
           const outScale = Math.min(dpr, Math.sqrt(MAX_CANVAS_PIXELS / (css.width * css.height)));
           const viewport = page.getViewport({ scale: scale * outScale, rotation: geom.rotation });
           // Render into a fresh canvas and swap it in when done, so zooming does not flash white.
-          const canvas = document.createElement('canvas');
-          canvas.width = Math.floor(viewport.width);
-          canvas.height = Math.floor(viewport.height);
-          canvas.className = 'page-canvas';
           // Form fields are drawn as live HTML controls by WidgetLayer, so leave them off the canvas.
-          const task = page.render({ canvasContext: canvas.getContext('2d', { alpha: false })!, viewport, annotationMode: AnnotationMode.ENABLE_FORMS });
-          renderTask = task;
-          await task.promise;
-          if (cancelled) {
-            canvas.width = canvas.height = 0;
-            return;
-          }
+          const size = { width: Math.floor(viewport.width), height: Math.floor(viewport.height) };
+          const draw = drawPage(pdf, page, { scale: scale * outScale, rotation: geom.rotation }, size, { priority: PRIORITY.page, noForms: true });
+          renderTask = draw;
+          const canvas = await draw.promise;
+          if (cancelled || !canvas) return;
+          canvas.className = 'page-canvas';
           swap(canvas);
-          endMain();
         }
         const textDiv = textRef.current;
         if (!textDiv) return;
@@ -187,15 +177,12 @@ export const PageView = memo(function PageView({ index, visible }: Props) {
         renderedText.current = textKey;
       } catch (e) {
         if ((e as Error)?.name !== 'RenderingCancelledException' && !cancelled) console.error(e);
-      } finally {
-        endMain();
       }
     })();
     return () => {
       cancelled = true;
       renderTask?.cancel();
       building?.cancel();
-      endMain();
     };
   }, [pdf, docVersion, index, scale, visible, geom.rotation, opening, dpr]);
 
@@ -228,29 +215,24 @@ export const PageView = memo(function PageView({ index, visible }: Props) {
       return clip({ left: v.left - v.width * k, top: v.top - v.height * k, width: v.width * (1 + 2 * k), height: v.height * (1 + 2 * k) }, w, h) ?? v;
     };
     const render = async (box: Box) => {
-      const slot = renderSlot(PRIORITY.page);
       let task: { cancel(): void } | null = null;
       let given = false;
-      inFlight = { box, cancel: () => { given = true; task?.cancel(); slot.done(); } };
-      const canvas = document.createElement('canvas');
+      inFlight = { box, cancel: () => { given = true; task?.cancel(); } };
+      let canvas: HTMLCanvasElement | null = null;
       try {
-        await slot.ready;
-        if (disposed || given) return;
         const page = await pdf.getPage(index + 1);
         if (disposed || given) return;
         const k = dpr;
-        const viewport = page.getViewport({ scale: scale * k, rotation: geom.rotation, offsetX: -box.left * k, offsetY: -box.top * k });
-        canvas.width = Math.ceil(box.width * k);
-        canvas.height = Math.ceil(box.height * k);
-        canvas.className = 'page-detail';
-        Object.assign(canvas.style, { left: `${box.left}px`, top: `${box.top}px`, width: `${box.width}px`, height: `${box.height}px` });
-        const t = page.render({ canvasContext: canvas.getContext('2d', { alpha: false })!, viewport, annotationMode: AnnotationMode.ENABLE_FORMS });
-        task = t;
-        await t.promise;
-        if (disposed || given) {
-          canvas.width = canvas.height = 0;
+        const at = { scale: scale * k, rotation: geom.rotation, offsetX: -box.left * k, offsetY: -box.top * k };
+        const draw = drawPage(pdf, page, at, { width: Math.ceil(box.width * k), height: Math.ceil(box.height * k) }, { priority: PRIORITY.page, noForms: true });
+        task = draw;
+        canvas = await draw.promise;
+        if (disposed || given || !canvas) {
+          if (canvas) canvas.width = canvas.height = 0;
           return;
         }
+        canvas.className = 'page-detail';
+        Object.assign(canvas.style, { left: `${box.left}px`, top: `${box.top}px`, width: `${box.width}px`, height: `${box.height}px` });
         host.appendChild(canvas);
         pieces.push({ box, canvas });
         while (pieces.length > DETAIL_PIECES) {
@@ -259,10 +241,9 @@ export const PageView = memo(function PageView({ index, visible }: Props) {
           old.canvas.width = old.canvas.height = 0;
         }
       } catch (e) {
-        canvas.width = canvas.height = 0;
+        if (canvas) canvas.width = canvas.height = 0;
         if ((e as Error)?.name !== 'RenderingCancelledException' && !disposed && !given) console.error(e);
       } finally {
-        slot.done();
         if (inFlight?.box === box) inFlight = null;
       }
       // The view may have moved on meanwhile.
 
@@ -16,6 +16,7 @@ export function PrefsDialog({ close }: { close: () => void }) {
   const author = useStore((s) => s.author);
   const zoom = usePrefs((p) => p.defaultZoom);
   const session = useSession((x) => x.enabled);
+  const background = usePrefs((p) => p.backgroundDrawing);
   return (
     <Modal title={t('Preferences')} onClose={close} footer={<button className="primary" onClick={close}>{t('Close')}</button>}>
       <h3 className="prefs-heading">{t('Appearance')}</h3>
@@ -44,6 +45,9 @@ export function PrefsDialog({ close }: { close: () => void }) {
         <input value={author} onChange={(e) => useStore.getState().setAuthor(e.target.value)} />
       </label>
       <label className="row"><input type="checkbox" style={NOFLEX} checked={session} onChange={(e) => void setSessionEnabled(e.target.checked)} /> {t('Restore open documents at the next start')}</label>
+      <label className="row" title={t('Complex pages (plans, maps) are drawn in a background thread, so scrolling and zooming stay smooth. Uses more memory.')}>
+        <input type="checkbox" style={NOFLEX} checked={background !== 'off'} onChange={(e) => setPrefs({ backgroundDrawing: e.target.checked ? 'auto' : 'off' })} /> {t('Draw complex pages in the background (experimental)')}
+      </label>
       <h3 className="prefs-heading">{t('Window')}</h3>
       <div className="row">
         <span className="muted small" style={{ flex: 1 }}>{t('Pane widths, open panes and the ribbon tab are remembered.')}</span>
 
@@ -1,6 +1,7 @@
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { PRIORITY, renderSlot } from '../lib/renderQueue';
+import { PRIORITY } from '../lib/renderQueue';
 import { docKey, keepCanvas, takeCanvas } from '../lib/pageCache';
+import { drawPage } from '../lib/render/draw';
 import { RotateCcw, RotateCw, Trash2, FilePlus2, Copy, FileOutput } from 'lucide-react';
 import { useStore } from '../store/store';
 import { useCan } from '../store/permissions';
@@ -75,33 +76,25 @@ const Thumb = memo(function Thumb({ index, root }: { index: number; root: HTMLEl
     if (kept) return swap(kept);
     let cancelled = false;
     let task: { cancel(): void } | null = null;
-    // The pages in the main view come first.
-    const slot = renderSlot(PRIORITY.thumbnail);
     (async () => {
       try {
-        await slot.ready;
-        if (cancelled) return;
         const page = await pdf.getPage(index + 1);
         if (cancelled) return;
-        const viewport = page.getViewport({ scale: scale * Math.min(window.devicePixelRatio || 1, 1.5), rotation: geom.rotation });
-        const canvas = document.createElement('canvas');
-        canvas.width = Math.floor(viewport.width);
-        canvas.height = Math.floor(viewport.height);
-        const t = page.render({ canvasContext: canvas.getContext('2d', { alpha: false })!, viewport });
-        task = t;
-        await t.promise;
-        if (cancelled) return;
+        const at = { scale: scale * Math.min(window.devicePixelRatio || 1, 1.5), rotation: geom.rotation };
+        const viewport = page.getViewport(at);
+        // The pages in the main view come first.
+        const draw = drawPage(pdf, page, at, { width: Math.floor(viewport.width), height: Math.floor(viewport.height) }, { priority: PRIORITY.thumbnail });
+        task = draw;
+        const canvas = await draw.promise;
+        if (cancelled || !canvas) return;
         swap(canvas);
       } catch {
         /* cancelled */
-      } finally {
-        slot.done();
       }
     })();
     return () => {
       cancelled = true;
       task?.cancel();
-      slot.done();
     };
   }, [inView, pdf, docVersion, index, scale, geom.rotation, opening]);
 
 
@@ -3,6 +3,7 @@ import workerUrl from 'pdfjs-dist/build/pdf.worker.min.mjs?url';
 import type { PDFDocumentProxy, PDFPageProxy } from 'pdfjs-dist';
 import type { PageGeom, Rect } from './types';
 import { normRot } from './geometry';
+import { rememberSource } from './render/offscreen';
 
 pdfjs.GlobalWorkerOptions.workerSrc = workerUrl;
 /**
@@ -39,11 +40,15 @@ const ASSETS =
 export async function openPdf(
   bytes: Uint8Array,
   askPassword: (retry: boolean) => string | null | Promise<string | null>,
-  /** The caller no longer needs `bytes` (a throwaway document): hand them over without copying. */
-  opts: { handOver?: boolean } = {},
+  /**
+   * handOver: the caller no longer needs `bytes` (a throwaway document): hand them over
+   * without copying. copy: a copy of `bytes` made elsewhere, for pdf.js to take.
+   */
+  opts: { handOver?: boolean; copy?: Uint8Array | null } = {},
 ): Promise<{ pdf: PDFDocumentProxy; password?: string }> {
   let password: string | undefined;
-  const task = pdfjs.getDocument({ data: opts.handOver ? bytes : bytes.slice(), isEvalSupported: false, worker: worker(), ...ASSETS });
+  const data = opts.handOver ? bytes : opts.copy ?? bytes.slice();
+  const task = pdfjs.getDocument({ data, isEvalSupported: false, worker: worker(), ...ASSETS });
   task.onPassword = async (update: (pw: string) => void, reason: number) => {
     const pw = await askPassword(reason === pdfjs.PasswordResponses.INCORRECT_PASSWORD);
     if (pw === null) {
@@ -55,6 +60,8 @@ export async function openPdf(
   };
   try {
     const pdf = await task.promise;
+    // Kept for drawing slow pages in the background (render/offscreen.ts); not copied.
+    if (!opts.handOver) rememberSource(pdf, bytes, password);
     return { pdf, password };
   } catch (e) {
     if (password === undefined && (e as Error)?.name === 'PasswordException') throw new PasswordCancelled();
 
@@ -14,10 +14,15 @@ export interface Prefs {
   propsWidth: number;
   /** The ribbon tab shown last (File is never remembered). */
   ribbonTab: string;
+  /**
+   * Draw pages in a background thread (render/offscreen.ts): 'auto' for documents slow to
+   * draw, 'off', or 'always' (every document; for testing, not offered in the interface).
+   */
+  backgroundDrawing: 'auto' | 'off' | 'always';
 }
 
 const KEY = 'pdf-xploder.prefs';
-export const DEFAULT_PREFS: Prefs = { defaultZoom: 'width', showProps: true, sidebarWidth: 240, propsWidth: 250, ribbonTab: 'Home' };
+export const DEFAULT_PREFS: Prefs = { defaultZoom: 'width', showProps: true, sidebarWidth: 240, propsWidth: 250, ribbonTab: 'Home', backgroundDrawing: 'auto' };
 
 export const PANE_MIN = 180;
 export const PANE_MAX = 520;
 
@@ -0,0 +1,77 @@
+/**
+ * Draw a page, or a piece of it, into a new canvas: in the background thread when the
+ * document is drawn there (offscreen.ts), otherwise here, one turn at a time
+ * (renderQueue.ts). Pages slow to draw here move their document to the background.
+ */
+import { AnnotationMode, type PDFDocumentProxy, type PDFPageProxy } from 'pdfjs-dist';
+import { renderSlot } from '../renderQueue';
+import { drawOffscreen, drawsOffscreen, noteMainRender } from './offscreen';
+
+export interface DrawAt {
+  scale: number;
+  rotation: number;
+  offsetX?: number;
+  offsetY?: number;
+}
+
+export interface DrawOptions {
+  priority: number;
+  /** Leave form fields off (the page view shows them as HTML controls). */
+  noForms?: boolean;
+}
+
+/** Resolves to the drawn canvas, or null when cancelled. */
+export function drawPage(
+  pdf: PDFDocumentProxy,
+  page: PDFPageProxy,
+  at: DrawAt,
+  size: { width: number; height: number },
+  o: DrawOptions,
+): { promise: Promise<HTMLCanvasElement | null>; cancel(): void } {
+  let cancelled = false;
+  let task: { cancel(): void } | null = null;
+  let slot: ReturnType<typeof renderSlot> | null = null;
+  const cancel = () => {
+    cancelled = true;
+    task?.cancel();
+    slot?.done();
+  };
+  const run = async (): Promise<HTMLCanvasElement | null> => {
+    for (;;) {
+      const off = drawOffscreen(pdf, { page: page.pageNumber - 1, ...at, ...size, noForms: o.noForms }, o.priority);
+      task = off;
+      const drawn = await off.promise;
+      if (drawn || cancelled) return cancelled ? null : drawn;
+      slot = renderSlot(o.priority);
+      await slot.ready;
+      if (cancelled) return null;
+      // Moved to the background meanwhile (another page was slow): draw it there.
+      if (!drawsOffscreen(pdf)) break;
+      slot.done();
+      slot = null;
+    }
+    const canvas = Object.assign(document.createElement('canvas'), size);
+    try {
+      const t = page.render({
+        canvasContext: canvas.getContext('2d', { alpha: false })!,
+        viewport: page.getViewport(at),
+        annotationMode: o.noForms ? AnnotationMode.ENABLE_FORMS : AnnotationMode.ENABLE,
+      });
+      task = t;
+      const t0 = performance.now();
+      await t.promise;
+      noteMainRender(pdf, performance.now() - t0);
+    } catch (e) {
+      canvas.width = canvas.height = 0;
+      throw e;
+    } finally {
+      slot?.done();
+    }
+    if (cancelled) {
+      canvas.width = canvas.height = 0;
+      return null;
+    }
+    return canvas;
+  };
+  return { promise: run(), cancel };
+}