From b41f8e54e4327d6640088bdc073b4f23b0100bf3 Mon Sep 17 00:00:00 2001
From: BryanMurphy <123925276+BPMData@users.noreply.github.com>
Date: Mon, 26 Oct 2026 10:46:25 -0400
Subject: [PATCH] v30: long worksheets no longer crawl on Mac (Retina) screens

The overlay drew ink on one canvas as tall as the whole worksheet. On a
2x screen a 20-page worksheet made that canvas about 22,000 pixels tall.
Chrome can only hand a canvas up to 16,384 pixels to the graphics chip;
past that it draws with the main processor, and each pen move took about
a tenth of a second. The lab's 1x screens stayed under the limit, which
is why the same file was fine there.

Now the canvas is a band about three screens tall that follows the
scrolling and redraws when it moves. Ink is saved in the same place as
before, so existing ink lines up. Measured on the reported worksheet:
drawing went from about 9 to 60 frames a second on a 2x screen.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 app/index.html           |  4 ++--
 app/report/index.html    |  2 +-
 app/sw.js                | 10 ++++----
 app/version.json         |  2 +-
 index.html               | 52 +++++++++++++++++++++++++++++-----------
 overlay/ink_overlay.html | 52 +++++++++++++++++++++++++++++-----------
 6 files changed, 85 insertions(+), 37 deletions(-)

diff --git a/app/index.html b/app/index.html
index 39f1168..fc751c2 100644
--- a/app/index.html
+++ b/app/index.html
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>OverBoard PDF</title>
 <meta name="description" content="OverBoard: write on any PDF on your smartboard. Runs in the browser; nothing is uploaded.">
-<meta name="ob-version" content="fe637a0b71d4">
+<meta name="ob-version" content="4d7b27241fc6">
 <meta name="theme-color" content="#1f1f1f">
 <link rel="manifest" href="manifest.json">
 <link rel="icon" href="icons/icon-192.png">
@@ -45,7 +45,7 @@ <h2 data-t="open_again">Open again</h2>
     <p class="note"><span data-th="start_note">Your PDF and your ink stay in this browser on this computer. Nothing is uploaded.
       Have a Word file? In Word, choose File → Save as PDF, then drop the PDF here.
       Have an HTML worksheet? Drop it here to get a <i>_board.html</i> copy you can write on.</span>
-      <br><a href="../" data-t="back_demo">Back to the HTML worksheet demo</a> · <a href="https://github.com/BPMData/OverBoard" data-t="about">About OverBoard</a> · <a href="report/?from=start" target="_blank" data-t="board_help">Board not working?</a> · <span id="ob-release" title="OverBoard version">v29</span></p>
+      <br><a href="../" data-t="back_demo">Back to the HTML worksheet demo</a> · <a href="https://github.com/BPMData/OverBoard" data-t="about">About OverBoard</a> · <a href="report/?from=start" target="_blank" data-t="board_help">Board not working?</a> · <span id="ob-release" title="OverBoard version">v30</span></p>
     <p class="note ob-langpick"><label><span aria-hidden="true">🌐</span> <select id="ob-lang" aria-label="Language" data-ta="language" data-tt="language" title="Language"></select></label></p>
   </div>
 </main>
diff --git a/app/report/index.html b/app/report/index.html
index a731f4d..2b06b92 100644
--- a/app/report/index.html
+++ b/app/report/index.html
@@ -96,7 +96,7 @@ <h1 data-t="r_h1">Is OverBoard not working on your board?</h1>
     <p data-th="r_intro2">If something doesn't work the way the page asks, that's fine. <b>That's exactly what I need to know.</b> Just keep going.</p>
     <p class="mute small" data-th="r_privacy">Nothing is sent until you press <b>Send</b> at the very end, and you'll see everything first. No worksheets, PDFs or ink are ever included.</p>
     <div class="row"><button class="go big" data-go="start" data-t="r_start">Start</button></div>
-    <p class="mute small" style="margin-top:28px">OverBoard <span id="ob-release" title="OverBoard version">v29</span></p>
+    <p class="mute small" style="margin-top:28px">OverBoard <span id="ob-release" title="OverBoard version">v30</span></p>
   </div></div>
 </section>
 
diff --git a/app/sw.js b/app/sw.js
index c0d7443..b376db6 100644
--- a/app/sw.js
+++ b/app/sw.js
@@ -1,7 +1,7 @@
 // ===== GENERATED by tools/build.py: every file the app needs, with the start of its SHA-256. Do not edit by hand. =====
-const VERSION = '8cc50a0aae17';
+const VERSION = 'dabc7df955e3';
 const FILES = {
-  "../overlay/ink_overlay.html": "060ff1e48ce30bef",
+  "../overlay/ink_overlay.html": "be692804b7661e70",
   "../shared/ink-core.js": "f5235bb4ef99a375",
   "../shared/strings.js": "d0525093455e4d45",
   "../shared/toolbar.css": "d3155c02c903c96e",
@@ -14,14 +14,14 @@ const FILES = {
   "icons/icon-192.png": "d245e15b36475003",
   "icons/icon-512.png": "17c1021fe2a0ade1",
   "icons/maskable-512.png": "0c58f1bdccc9eda9",
-  "index.html": "5aee5d68789d47b3",
+  "index.html": "18ce16d379756213",
   "ink.js": "069771a403be1378",
   "libs.js": "c09f60186ab9029a",
   "main.js": "ac823fa04ab55eb2",
   "manifest.json": "f7ee4a6c6f83cd40",
   "notebook.js": "47bcfd4f80712344",
   "offline.js": "6504935b2738711a",
-  "report/index.html": "7e62da50bf313c77",
+  "report/index.html": "084e1351caafa212",
   "store.js": "66af54cd32e6cbd2",
   "textlayer.js": "1911308ed3e2a8b5",
   "vendor/pdf-lib@1.17.1/LICENSE.md": "f2c9fc00fdb66eb9",
@@ -214,7 +214,7 @@ const FILES = {
   "vendor/pdfjs-dist@4.10.38/standard_fonts/LiberationSans-BoldItalic.ttf": "a224075ac17495ad",
   "vendor/pdfjs-dist@4.10.38/standard_fonts/LiberationSans-Italic.ttf": "832b4406dbef2362",
   "vendor/pdfjs-dist@4.10.38/standard_fonts/LiberationSans-Regular.ttf": "f8ace1f892b2bd9d",
-  "version.json": "295fa7c505d13cad",
+  "version.json": "445c090471c65004",
   "viewer.js": "648b4479c5b68b93"
 };
 // ===== END GENERATED =====
diff --git a/app/version.json b/app/version.json
index a369c87..202cad3 100644
--- a/app/version.json
+++ b/app/version.json
@@ -1,5 +1,5 @@
 {
-  "v": "fe637a0b71d4",
+  "v": "4d7b27241fc6",
   "js": [
     "embed.js",
     "export.js",
diff --git a/index.html b/index.html
index ca57d56..27bdab6 100644
--- a/index.html
+++ b/index.html
@@ -54,7 +54,7 @@ <h2>Exit ticket</h2>
   <div class="lines"><div></div><div></div><div></div><div></div></div>
   <div class="foot">OverBoard · page 2 / 2 · Your ink saves in this browser only. Nothing is uploaded.</div>
 </div>
-<!-- ===== INK OVERLAY START (v29) =====
+<!-- ===== INK OVERLAY START (v30) =====
   Smartboard writing layer. Paste this whole block just before </body> in any .html file.
   SMART BOARD: pen tip writes. Palm, fist or side of hand erases (the board reports it as an eraser).
   Finger (and the round end of the SMART pen) scrolls the page; the "Finger" button switches it to drawing if you lose the pen.
@@ -1686,14 +1686,20 @@ <h2>Exit ticket</h2>
   /* ---------- drawing ---------- */
   // pen ink and covers go on the top canvas, highlights on the layer under it, the eraser cuts through both
   function layers(s){ return s.e ? [ctx, hctx] : seeThrough(s) ? [hctx] : [ctx]; }
-  function drawStroke(s){ layers(s).forEach(function(g){ paintStroke(g, s, scale, OX * scale, 0); }); }
+  function drawStroke(s){ layers(s).forEach(function(g){ paintStroke(g, s, scale, OX * scale, -BY * scale); }); }
   // live drawing draws the same curve piece by piece as points arrive (matches paintStroke exactly)
   var live = null;
-  function drawPieces(s, pieces){ layers(s).forEach(function(g){ paintPieces(g, s, pieces, scale, OX * scale, 0); }); }
+  function drawPieces(s, pieces){ layers(s).forEach(function(g){ paintPieces(g, s, pieces, scale, OX * scale, -BY * scale); }); }
   function clearCanvas(c, g){ g.save(); g.setTransform(1,0,0,1,0,0); g.clearRect(0,0,c.width,c.height); g.restore(); }
+  function inBand(s){   // skip strokes wholly above or below the canvas band
+    var lo = Infinity, hi = -Infinity, p = s.p;
+    for (var k = 1; k < p.length; k += 2) { if (p[k] < lo) lo = p[k]; if (p[k] > hi) hi = p[k]; }
+    return hi + s.w >= BY && lo - s.w <= BY + BH;
+  }
   function redraw(){
     clearCanvas(canvas, ctx); clearCanvas(hcan, hctx);
-    for (var i = 0; i < strokes.length; i++) drawStroke(strokes[i]);
+    for (var i = 0; i < strokes.length; i++) if (inBand(strokes[i])) drawStroke(strokes[i]);
+    if (cur) drawStroke(cur);   // a stroke still being drawn when the band moves
   }
   function calcCW(){
     var w = 0;
@@ -1702,27 +1708,44 @@ <h2>Exit ticket</h2>
   }
   // The canvas spans the whole window so you can write in the empty space beside the page.
   // Ink is stored relative to the page column (CW wide, centered), so it stays lined up when the window or zoom changes.
-  var FW = 0, OX = 0;   // full canvas width (CSS px) and where the page column starts inside it
+  // Up and down, the canvas is only a band about three screens tall that follows the scrolling (BY = its top, BH = its
+  // height, in worksheet px). A canvas taller than 16384 screen pixels can't be drawn by the graphics chip, so Chrome
+  // falls back to the processor and every pen move gets slow: a 20-page worksheet on a 2x (Retina) screen ran at a few
+  // frames a second.
+  var FW = 0, OX = 0, BY = 0, BH = 0;   // full canvas width (CSS px) and where the page column starts inside it
+  function docTop(){ return canvas.getBoundingClientRect().top - BY * Z; }   // screen y of the worksheet's top edge
   function size(){
     var h = Math.ceil(body.offsetHeight), cw = calcCW();
     var fw = Math.max(cw, Math.floor(document.documentElement.clientWidth / Z));
-    var sc = Math.min((window.devicePixelRatio || 1) * Z, 2 * Math.max(1, Z), 30000 / h, 30000 / fw, Math.sqrt(100e6 / (fw * h)));   // sharp when zoomed in, under browser canvas limits (two canvases)
-    if (h === H && sc === scale && cw === CW && fw === FW && canvas.width) return;
-    H = h; scale = sc; CW = cw; FW = fw; OX = (fw - cw) / 2;
+    var bh = Math.min(h, Math.ceil(3 * innerHeight / Z));
+    var sc = Math.min((window.devicePixelRatio || 1) * Z, 2 * Math.max(1, Z), 16000 / bh, 16000 / fw, Math.sqrt(100e6 / (fw * bh)));   // sharp when zoomed in, small enough for the graphics chip
+    if (h === H && sc === scale && cw === CW && fw === FW && bh === BH && canvas.width) { follow(); return; }
+    H = h; scale = sc; CW = cw; FW = fw; OX = (fw - cw) / 2; BH = bh;
     [canvas, hcan].forEach(function(c){
-      c.width = Math.round(FW * scale); c.height = Math.round(H * scale);
-      c.style.width = FW + 'px'; c.style.height = H + 'px';
+      c.width = Math.round(FW * scale); c.height = Math.round(BH * scale);
+      c.style.width = FW + 'px'; c.style.height = BH + 'px';
     });
+    follow(true);
+  }
+  // keep the band around what's on screen, with a screen to spare above and below; redraw when it moves
+  function follow(force){
+    var vh = innerHeight / Z, top = -docTop() / Z, by = BY;
+    if (force || top < BY + (BY > 0 ? vh / 3 : 0) || top + vh > BY + BH - (BY + BH < H ? vh / 3 : 0))
+      by = Math.round(Math.max(0, Math.min(H - BH, top - (BH - vh) / 2)));
+    if (by === BY && !force) return;
+    BY = by;
+    canvas.style.top = hcan.style.top = BY + 'px';
     redraw();
   }
 
   function pt(e){
-    var r = canvas.getBoundingClientRect();   // screen px; ink is in the worksheet's own px, so divide by the zoom
-    return [Math.round(((e.clientX - r.left) / Z - OX) * 10) / 10, Math.round((e.clientY - r.top) / Z * 10) / 10];
+    var t = docTop(), r = canvas.getBoundingClientRect();   // screen px; ink is in the worksheet's own px, so divide by the zoom
+    return [Math.round(((e.clientX - r.left) / Z - OX) * 10) / 10, Math.round((e.clientY - t) / Z * 10) / 10];
   }
   canvas.addEventListener('pointerdown', function(e){
     if (active !== null || !ready) return;
     if (e.pointerType === 'mouse' && e.button !== 0) return;
+    follow();
     // SMART board: pen tip = "pen"; palm/fist/side of hand = "pen" with the eraser button (32); finger and round pen end = "mouse"
     var kind = pointerKind(e), palm = kind === 'palm', finger = kind === 'finger';
     active = e.pointerId;
@@ -1783,7 +1806,7 @@ <h2>Exit ticket</h2>
      it count as that page); "this page" is the one at the middle of the screen */
   function pages(){ return [].slice.call(document.querySelectorAll('.page')); }
   function clearPage(){
-    var ct = canvas.getBoundingClientRect().top;
+    var ct = docTop();
     var tops = pages().map(function(pg){ return (pg.getBoundingClientRect().top - ct) / Z; });
     function band(y){ var i = 0; while (i + 1 < tops.length && tops[i + 1] <= y) i++; return i; }
     var n = band((innerHeight / 2 - ct) / Z);
@@ -2144,7 +2167,7 @@ <h2>Exit ticket</h2>
     clearPrint();
     var list = [].slice.call(document.querySelectorAll('.page'));
     if (!list.length) list = [body];
-    var ctop = canvas.getBoundingClientRect().top, hasHl = !PRINT_INK_BLACK && strokes.some(seeThrough);
+    var ctop = docTop(), hasHl = !PRINT_INK_BLACK && strokes.some(seeThrough);
     list.forEach(function(pg){
       var ph = pg.offsetHeight, pw = pg.offsetWidth, top = (pg === body) ? 0 : pg.getBoundingClientRect().top - ctop;
       var ps = Math.min(PRINT_SCALE, 30000 / ph, Math.sqrt(60e6 / (CW * ph)));
@@ -2171,6 +2194,7 @@ <h2>Exit ticket</h2>
   /* ---------- start ---------- */
   var src = load(); size(); translateAll(); renderPeriods(); refresh(); setMode('write'); layoutClear(); fitToolbar();
   window.addEventListener('resize', size);
+  window.addEventListener('scroll', function(){ follow(); }, { passive: true });
   window.addEventListener('load', size);
   if (window.ResizeObserver) new ResizeObserver(size).observe(body);
   function started(src){ setStatus(tr(src === 'file' ? 'st_loaded_file' : src === 'browser' ? 'st_restored' : src === 'old' ? 'st_old_carried' : 'st_ready', { p: D.active })); }
diff --git a/overlay/ink_overlay.html b/overlay/ink_overlay.html
index d7a5bd7..c18ab1e 100644
--- a/overlay/ink_overlay.html
+++ b/overlay/ink_overlay.html
@@ -1,4 +1,4 @@
-<!-- ===== INK OVERLAY START (v29) =====
+<!-- ===== INK OVERLAY START (v30) =====
   Smartboard writing layer. Paste this whole block just before </body> in any .html file.
   SMART BOARD: pen tip writes. Palm, fist or side of hand erases (the board reports it as an eraser).
   Finger (and the round end of the SMART pen) scrolls the page; the "Finger" button switches it to drawing if you lose the pen.
@@ -1630,14 +1630,20 @@
   /* ---------- drawing ---------- */
   // pen ink and covers go on the top canvas, highlights on the layer under it, the eraser cuts through both
   function layers(s){ return s.e ? [ctx, hctx] : seeThrough(s) ? [hctx] : [ctx]; }
-  function drawStroke(s){ layers(s).forEach(function(g){ paintStroke(g, s, scale, OX * scale, 0); }); }
+  function drawStroke(s){ layers(s).forEach(function(g){ paintStroke(g, s, scale, OX * scale, -BY * scale); }); }
   // live drawing draws the same curve piece by piece as points arrive (matches paintStroke exactly)
   var live = null;
-  function drawPieces(s, pieces){ layers(s).forEach(function(g){ paintPieces(g, s, pieces, scale, OX * scale, 0); }); }
+  function drawPieces(s, pieces){ layers(s).forEach(function(g){ paintPieces(g, s, pieces, scale, OX * scale, -BY * scale); }); }
   function clearCanvas(c, g){ g.save(); g.setTransform(1,0,0,1,0,0); g.clearRect(0,0,c.width,c.height); g.restore(); }
+  function inBand(s){   // skip strokes wholly above or below the canvas band
+    var lo = Infinity, hi = -Infinity, p = s.p;
+    for (var k = 1; k < p.length; k += 2) { if (p[k] < lo) lo = p[k]; if (p[k] > hi) hi = p[k]; }
+    return hi + s.w >= BY && lo - s.w <= BY + BH;
+  }
   function redraw(){
     clearCanvas(canvas, ctx); clearCanvas(hcan, hctx);
-    for (var i = 0; i < strokes.length; i++) drawStroke(strokes[i]);
+    for (var i = 0; i < strokes.length; i++) if (inBand(strokes[i])) drawStroke(strokes[i]);
+    if (cur) drawStroke(cur);   // a stroke still being drawn when the band moves
   }
   function calcCW(){
     var w = 0;
@@ -1646,27 +1652,44 @@
   }
   // The canvas spans the whole window so you can write in the empty space beside the page.
   // Ink is stored relative to the page column (CW wide, centered), so it stays lined up when the window or zoom changes.
-  var FW = 0, OX = 0;   // full canvas width (CSS px) and where the page column starts inside it
+  // Up and down, the canvas is only a band about three screens tall that follows the scrolling (BY = its top, BH = its
+  // height, in worksheet px). A canvas taller than 16384 screen pixels can't be drawn by the graphics chip, so Chrome
+  // falls back to the processor and every pen move gets slow: a 20-page worksheet on a 2x (Retina) screen ran at a few
+  // frames a second.
+  var FW = 0, OX = 0, BY = 0, BH = 0;   // full canvas width (CSS px) and where the page column starts inside it
+  function docTop(){ return canvas.getBoundingClientRect().top - BY * Z; }   // screen y of the worksheet's top edge
   function size(){
     var h = Math.ceil(body.offsetHeight), cw = calcCW();
     var fw = Math.max(cw, Math.floor(document.documentElement.clientWidth / Z));
-    var sc = Math.min((window.devicePixelRatio || 1) * Z, 2 * Math.max(1, Z), 30000 / h, 30000 / fw, Math.sqrt(100e6 / (fw * h)));   // sharp when zoomed in, under browser canvas limits (two canvases)
-    if (h === H && sc === scale && cw === CW && fw === FW && canvas.width) return;
-    H = h; scale = sc; CW = cw; FW = fw; OX = (fw - cw) / 2;
+    var bh = Math.min(h, Math.ceil(3 * innerHeight / Z));
+    var sc = Math.min((window.devicePixelRatio || 1) * Z, 2 * Math.max(1, Z), 16000 / bh, 16000 / fw, Math.sqrt(100e6 / (fw * bh)));   // sharp when zoomed in, small enough for the graphics chip
+    if (h === H && sc === scale && cw === CW && fw === FW && bh === BH && canvas.width) { follow(); return; }
+    H = h; scale = sc; CW = cw; FW = fw; OX = (fw - cw) / 2; BH = bh;
     [canvas, hcan].forEach(function(c){
-      c.width = Math.round(FW * scale); c.height = Math.round(H * scale);
-      c.style.width = FW + 'px'; c.style.height = H + 'px';
+      c.width = Math.round(FW * scale); c.height = Math.round(BH * scale);
+      c.style.width = FW + 'px'; c.style.height = BH + 'px';
     });
+    follow(true);
+  }
+  // keep the band around what's on screen, with a screen to spare above and below; redraw when it moves
+  function follow(force){
+    var vh = innerHeight / Z, top = -docTop() / Z, by = BY;
+    if (force || top < BY + (BY > 0 ? vh / 3 : 0) || top + vh > BY + BH - (BY + BH < H ? vh / 3 : 0))
+      by = Math.round(Math.max(0, Math.min(H - BH, top - (BH - vh) / 2)));
+    if (by === BY && !force) return;
+    BY = by;
+    canvas.style.top = hcan.style.top = BY + 'px';
     redraw();
   }
 
   function pt(e){
-    var r = canvas.getBoundingClientRect();   // screen px; ink is in the worksheet's own px, so divide by the zoom
-    return [Math.round(((e.clientX - r.left) / Z - OX) * 10) / 10, Math.round((e.clientY - r.top) / Z * 10) / 10];
+    var t = docTop(), r = canvas.getBoundingClientRect();   // screen px; ink is in the worksheet's own px, so divide by the zoom
+    return [Math.round(((e.clientX - r.left) / Z - OX) * 10) / 10, Math.round((e.clientY - t) / Z * 10) / 10];
   }
   canvas.addEventListener('pointerdown', function(e){
     if (active !== null || !ready) return;
     if (e.pointerType === 'mouse' && e.button !== 0) return;
+    follow();
     // SMART board: pen tip = "pen"; palm/fist/side of hand = "pen" with the eraser button (32); finger and round pen end = "mouse"
     var kind = pointerKind(e), palm = kind === 'palm', finger = kind === 'finger';
     active = e.pointerId;
@@ -1727,7 +1750,7 @@
      it count as that page); "this page" is the one at the middle of the screen */
   function pages(){ return [].slice.call(document.querySelectorAll('.page')); }
   function clearPage(){
-    var ct = canvas.getBoundingClientRect().top;
+    var ct = docTop();
     var tops = pages().map(function(pg){ return (pg.getBoundingClientRect().top - ct) / Z; });
     function band(y){ var i = 0; while (i + 1 < tops.length && tops[i + 1] <= y) i++; return i; }
     var n = band((innerHeight / 2 - ct) / Z);
@@ -2088,7 +2111,7 @@
     clearPrint();
     var list = [].slice.call(document.querySelectorAll('.page'));
     if (!list.length) list = [body];
-    var ctop = canvas.getBoundingClientRect().top, hasHl = !PRINT_INK_BLACK && strokes.some(seeThrough);
+    var ctop = docTop(), hasHl = !PRINT_INK_BLACK && strokes.some(seeThrough);
     list.forEach(function(pg){
       var ph = pg.offsetHeight, pw = pg.offsetWidth, top = (pg === body) ? 0 : pg.getBoundingClientRect().top - ctop;
       var ps = Math.min(PRINT_SCALE, 30000 / ph, Math.sqrt(60e6 / (CW * ph)));
@@ -2115,6 +2138,7 @@
   /* ---------- start ---------- */
   var src = load(); size(); translateAll(); renderPeriods(); refresh(); setMode('write'); layoutClear(); fitToolbar();
   window.addEventListener('resize', size);
+  window.addEventListener('scroll', function(){ follow(); }, { passive: true });
   window.addEventListener('load', size);
   if (window.ResizeObserver) new ResizeObserver(size).observe(body);
   function started(src){ setStatus(tr(src === 'file' ? 'st_loaded_file' : src === 'browser' ? 'st_restored' : src === 'old' ? 'st_old_carried' : 'st_ready', { p: D.active })); }