Client: size canvas to viewport, 100% zoom, patch blit no longer clears the screen

index.html

@@ -38,18 +38,34 @@
     canvas.width = Math.round(vw*dpr);
     canvas.height = Math.round(vh*dpr);
     canvas.style.width = vw+"px"; canvas.style.height = vh+"px";
-    var s = Math.min(vw/FB, vh/FB);
-    view.scale = s * dpr;
-    view.ox = (canvas.width - FB*view.scale)/2;
-    view.oy = (canvas.height - FB*view.scale)/2;
-    blit(0,0,FB,FB);
+    // 100% zoom = one framebuffer pixel per CSS pixel (x dpr for device px).
+    // Never magnify past 100%; only shrink to fit a viewport smaller than the
+    // framebuffer. (Previously it always scaled up to fill the window, which
+    // is why the OS looked "zoomed in" / too big.)
+    var fit = Math.min(vw/FB, vh/FB);
+    view.scale = Math.min(fit, 1) * dpr;
+    view.ox = Math.floor((canvas.width - FB*view.scale)/2);
+    view.oy = Math.floor((canvas.height - FB*view.scale)/2);
+    paintAll();
   }
 
-  function blit(x,y,w,h){
+  // Full repaint of the VISIBLE canvas from the offscreen framebuffer.
+  function paintAll(){
     ctx.imageSmoothingEnabled = false;
     ctx.fillStyle = "#000"; ctx.fillRect(0,0,canvas.width,canvas.height);
-    ctx.drawImage(off, x,y,w,h,
-      view.ox + x*view.scale, view.oy + y*view.scale, w*view.scale, h*view.scale);
+    ctx.drawImage(off, 0,0,FB,FB, view.ox, view.oy, FB*view.scale, FB*view.scale);
+  }
+
+  // Partial repaint: redraw ONLY the changed region. This must not clear the
+  // whole visible canvas -- doing so blacked out everything outside the patch
+  // until the next frame happened to touch it ("black tiles until mouseover").
+  function blit(x,y,w,h){
+    ctx.imageSmoothingEnabled = false;
+    var dx = Math.floor(view.ox + x*view.scale);
+    var dy = Math.floor(view.oy + y*view.scale);
+    var dx2 = Math.ceil(view.ox + (x+w)*view.scale);
+    var dy2 = Math.ceil(view.oy + (y+h)*view.scale);
+    ctx.drawImage(off, x,y,w,h, dx,dy, dx2-dx, dy2-dy);
   }
 
   function toFB(clientX, clientY){
@@ -88,7 +104,7 @@
       octx.imageSmoothingEnabled = false;
       octx.drawImage(bmp, 0, 0);
       bmp.close && bmp.close();
-      blit(0,0,FB,FB);
+      paintAll();
       hud();
     });
   }
@@ -201,6 +217,10 @@
     hud();
   }, 1000);
 
+  // Size the backing store to the viewport BEFORE anything else. Without this
+  // the canvas keeps its 300x150 default and the browser stretches it to the
+  // window -- a massively zoomed-in, blocky desktop.
+  layout();
   connect();
 })();
 </script>