Fix real-time frame render: decode+paint newest JPEG to canvas immediately (no img.src thrash/stale redraw/buffering)

index.html

@@ -39,8 +39,8 @@
   /* Stage */
   .stage{position:relative;aspect-ratio:1280/704;background:#05070c;border-radius:12px;
     overflow:hidden;border:1px solid var(--edge);display:grid;place-items:center}
-  .stage img{width:100%;height:100%;object-fit:cover;display:none;image-rendering:auto}
-  .stage.playing img{display:block}
+  .stage canvas{width:100%;height:100%;object-fit:cover;display:none;image-rendering:auto}
+  .stage.playing canvas{display:block}
   .overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
     padding:24px;background:rgba(5,7,12,.55);backdrop-filter:blur(2px)}
   .overlay.hidden{display:none}
@@ -125,7 +125,7 @@
     <!-- Stage -->
     <div class="card">
       <div class="stage" id="stage" tabindex="0">
-        <img id="view" alt="world view" />
+        <canvas id="view" width="1280" height="704"></canvas>
         <div class="hud">
           <div class="chip"><span class="dot" id="status-dot"></span><span id="status-label">Idle</span></div>
           <div class="chip"><span id="fps-value">0</span> fps · <span id="frame-value">0</span> blk</div>
@@ -223,6 +223,7 @@ const state = {
 // --- DOM ---
 const $ = (id) => document.getElementById(id);
 const stage = $("stage"), view = $("view"), overlay = $("overlay");
+const viewCtx = view.getContext("2d", { alpha: false, desynchronized: true });
 const spinner = $("spinner"), overlayTitle = $("overlay-title"), overlaySub = $("overlay-sub");
 const statusDot = $("status-dot"), statusLabel = $("status-label");
 const fpsValue = $("fps-value"), frameValue = $("frame-value");
@@ -292,6 +293,52 @@ async function initClient(){
   if(!state.client) state.client = await Client.connect(window.location.origin);
 }
 
+// --- Frame decode + paint ---
+// Decode each incoming JPEG and paint it to the canvas as soon as it is ready.
+// We always keep only the FRESHEST pending frame (coalesce) so a slow decode
+// can never build up a backlog / play stale buffered frames — the visible
+// output tracks the real generation rate reported by the fps counter.
+let pendingFrame = null;   // {bytes, blk, fps} newest arrived, not yet decoded
+let decoding = false;
+
+async function drainFrames(){
+  if(decoding) return;
+  decoding = true;
+  try{
+    while(pendingFrame){
+      const { bytes, blk, fps } = pendingFrame;
+      pendingFrame = null;               // grab the freshest, drop anything older
+      let painted = false;
+      try{
+        const bitmap = await createImageBitmap(new Blob([bytes], {type:"image/jpeg"}));
+        viewCtx.drawImage(bitmap, 0, 0, view.width, view.height);
+        if(bitmap.close) bitmap.close();
+        painted = true;
+      }catch(err){
+        // Fallback for browsers without createImageBitmap JPEG support.
+        painted = await paintViaImage(bytes);
+      }
+      if(painted){
+        if(!state.playing){ hideOverlay(); setPlaying(true); setStatus("playing","Playing"); }
+        frameValue.textContent = blk;
+        fpsValue.textContent = fps.toFixed(1);
+      }
+    }
+  }finally{
+    decoding = false;
+  }
+}
+
+function paintViaImage(bytes){
+  return new Promise((resolve)=>{
+    const url = URL.createObjectURL(new Blob([bytes], {type:"image/jpeg"}));
+    const im = new Image();
+    im.onload = ()=>{ viewCtx.drawImage(im, 0, 0, view.width, view.height); URL.revokeObjectURL(url); resolve(true); };
+    im.onerror = ()=>{ URL.revokeObjectURL(url); resolve(false); };
+    im.src = url;
+  });
+}
+
 // --- WebSocket frame stream ---
 function connectWS(){
   const proto = location.protocol === "https:" ? "wss:" : "ws:";
@@ -302,13 +349,10 @@ function connectWS(){
       const dv = new DataView(e.data);
       const blk = dv.getUint32(0);
       const fps = dv.getUint32(4)/10;
-      const blob = new Blob([e.data.slice(8)], {type:"image/jpeg"});
-      const url = URL.createObjectURL(blob);
-      view.onload = ()=>URL.revokeObjectURL(url);
-      view.src = url;
-      if(!state.playing){ hideOverlay(); setPlaying(true); setStatus("playing","Playing"); }
-      frameValue.textContent = blk;
-      fpsValue.textContent = fps.toFixed(1);
+      // Store the newest frame's bytes and decode/paint immediately (coalescing
+      // any frame that hasn't been painted yet), so display keeps pace with fps.
+      pendingFrame = { bytes: e.data.slice(8), blk, fps };
+      drainFrames();
     }else{
       try{
         const msg = JSON.parse(e.data);
@@ -395,6 +439,7 @@ async function startWorld(){
 async function stopWorld(){
   try{ if(state.client) await state.client.predict("/stop_game", { session_id: state.sessionId }); }catch{}
   if(state.ws){ try{ state.ws.send(JSON.stringify({type:"stop"})); }catch{} state.ws.close(); state.ws=null; }
+  pendingFrame = null;
   stopCtrlLoop();
   setPlaying(false);
   state.pressed.clear(); renderKeys();