From ba4e74c0d5526e6cc22ab9de6623c7d1cc2df216 Mon Sep 17 00:00:00 2001
From: tijzwa <tijzwa@vpo.nl>
Date: Mon, 18 Jul 2022 13:54:46 +0200
Subject: [PATCH 01/12] WIP

---
 html5/connect.html                      |   1 -
 html5/index.html                        |   1 -
 html5/js/BitmapDecoder.js               |  43 ++
 html5/js/ImageDecoder.js                |  68 ---
 html5/js/OffscreenDecodeWorker.js       | 755 ++++++++----------------
 html5/js/OffscreenDecodeWorkerHelper.js |   5 +-
 html5/js/VideoDecoder.js                |  71 ++-
 7 files changed, 324 insertions(+), 620 deletions(-)
 create mode 100644 html5/js/BitmapDecoder.js
 delete mode 100644 html5/js/ImageDecoder.js

diff --git a/html5/connect.html b/html5/connect.html
index b90aaa3b..89e89269 100644
--- a/html5/connect.html
+++ b/html5/connect.html
@@ -22,7 +22,6 @@
     <link rel="icon" type="image/png" href="favicon.png" />
 
     <script type="text/javascript" src="js/RgbHelpers.js"></script>
-    <script type="text/javascript" src="js/ImageDecoder.js"></script>
     <script type="text/javascript" src="js/VideoDecoder.js"></script>
     <script
       type="text/javascript"
diff --git a/html5/index.html b/html5/index.html
index d9ddc4b5..639b81d7 100644
--- a/html5/index.html
+++ b/html5/index.html
@@ -66,7 +66,6 @@
     <script type="text/javascript" src="js/Utilities.js"></script>
     <script type="text/javascript" src="js/MediaSourceUtil.js"></script>
     <script type="text/javascript" src="js/RgbHelpers.js"></script>
-    <script type="text/javascript" src="js/ImageDecoder.js"></script>
     <script type="text/javascript" src="js/VideoDecoder.js"></script>
     <script
       type="text/javascript"
diff --git a/html5/js/BitmapDecoder.js b/html5/js/BitmapDecoder.js
new file mode 100644
index 00000000..fdc3be9b
--- /dev/null
+++ b/html5/js/BitmapDecoder.js
@@ -0,0 +1,43 @@
+/*
+ * This file is part of Xpra.
+ * Copyright (C) 2021 Tijs van der Zwaan <tijzwa@vpo.nl>
+ * Licensed under MPL 2.0, see:
+ * http://www.mozilla.org/MPL/2.0/
+ *
+ * This file replaces ImageDecoder.js
+ */
+
+class XpraBitmapDecoder {
+
+    async convertToBitmap(packet) {
+        const width = packet[4];
+        const height = packet[5];
+        const coding = packet[6];
+        if (coding.startsWith("rgb")) {
+            const data = decode_rgb(packet);
+            const bitmap = await createImageBitmap(
+                new ImageData(new Uint8ClampedArray(data.buffer), width, height),
+                0,
+                0,
+                width,
+                height
+            );
+            packet[6] = `bitmap:${coding}`;
+            packet[7] = bitmap;
+        } else {
+            const paint_coding = coding.split("/")[0]; //ie: "png/P" -> "png"
+            const bitmap_options = {
+                premultiplyAlpha: "none",
+                resizeWidth : width,
+                resizeHeight: height,
+                resizeQuality: "medium"
+            };
+            
+            const blob = new Blob([packet[7].buffer], { type: `image/${paint_coding}` });
+            const bitmap = await createImageBitmap(blob, bitmap_options);
+            packet[6] = `bitmap:${coding}`;
+            packet[7] = bitmap;
+        }
+        return packet;
+    };
+}
diff --git a/html5/js/ImageDecoder.js b/html5/js/ImageDecoder.js
deleted file mode 100644
index e9543e85..00000000
--- a/html5/js/ImageDecoder.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
- * This file is part of Xpra.
- * Copyright (C) 2021 Tijs van der Zwaan <tijzwa@vpo.nl>
- * Copyright (c) 2021 Antoine Martin <antoine@xpra.org>
- * Licensed under MPL 2.0, see:
- * http://www.mozilla.org/MPL/2.0/
- *
- */
-
-/*
- * Receives native image packets and decode them via ImageDecoder.
- * https://developer.mozilla.org/en-US/docs/Web/API/ImageDecoder
- * ImageDecoder is only working in Chrome 94+ and Android
- *
- */
-
-const XpraImageDecoderLoader = {
-  hasNativeDecoder() {
-    return typeof ImageDecoder !== "undefined";
-  },
-};
-
-class XpraImageDecoder {
-  constructor() {
-    this.on_frame_decoded = null;
-    this.on_frame_error = (packet, error) => {
-      console.error("ImageDecoder error on packet", packet, ":", error);
-    };
-  }
-
-  queue_frame = function (packet) {
-    const width = packet[4];
-    const height = packet[5];
-    const coding = packet[6];
-    if (coding.startsWith("rgb")) {
-      // TODO: Figure out how to decode rgb with ImageDecoder API;
-      const data = decode_rgb(packet);
-      createImageBitmap(
-        new ImageData(new Uint8ClampedArray(data.buffer), width, height),
-        0,
-        0,
-        width,
-        height
-      )
-        .then((bitmap) => {
-          packet[6] = `bitmap:${coding}`;
-          packet[7] = bitmap;
-          this.on_frame_decoded(packet);
-        })
-        .catch((error) => this.on_frame_error(packet, error));
-    } else {
-      const paint_coding = coding.split("/")[0]; //ie: "png/P" -> "png"
-      const decoder = new ImageDecoder({
-        type: `image/${paint_coding}`,
-        data: packet[7],
-      });
-      decoder
-        .decode({ frameIndex: 0 })
-        .then((result) => {
-          packet[6] = `image:${paint_coding}`;
-          packet[7] = result;
-          decoder.close();
-          this.on_frame_decoded(packet);
-        })
-        .catch((error) => this.on_frame_error(packet, error));
-    }
-  };
-}
diff --git a/html5/js/OffscreenDecodeWorker.js b/html5/js/OffscreenDecodeWorker.js
index 9e23a196..84193db3 100644
--- a/html5/js/OffscreenDecodeWorker.js
+++ b/html5/js/OffscreenDecodeWorker.js
@@ -9,13 +9,12 @@
 
 /*
  * Worker for offscreen decoding and painting.
- * Requires Chrome 94+ or Android and a secure (SSL or localhost) context.
  */
 
 importScripts("./lib/lz4.js");
 importScripts("./lib/broadway/Decoder.js");
 importScripts("./VideoDecoder.js");
-importScripts("./ImageDecoder.js");
+importScripts("./BitmapDecoder.js");
 importScripts("./RgbHelpers.js");
 importScripts("./Constants.js");
 
@@ -23,555 +22,277 @@ importScripts("./Constants.js");
 const offscreen_canvas = new Map();
 
 const image_coding = [
-  "rgb",
-  "rgb32",
-  "rgb24",
-  "jpeg",
-  "png",
-  "png/P",
-  "png/L",
-  "webp",
-  "avif",
+    "rgb",
+    "rgb32",
+    "rgb24",
+    "jpeg",
+    "png",
+    "png/P",
+    "png/L",
+    "webp",
+    "avif",
 ];
-const video_coding = ["h264"];
-const all_encodings = new Set([
-  "void",
-  "scroll",
-  ...image_coding,
-  ...video_coding,
-]);
-
-const vsync = false;
-
-function send_decode_error(packet, error) {
-  packet[7] = null;
-  self.postMessage({ error: `${error}`, packet });
+const video_coding = [];
+if (XpraVideoDecoderLoader.hasNativeDecoder) {
+    // We can support native H264 decoding
+    video_coding.push("h264");
+} else {
+    console.warn("Offscreen decoding is available for images only. Please consider using Google Chrome 94+ in a secure (SSL or localhost) context h264 offscreen decoding support.");
 }
 
-class WindowDecoder {
-  constructor(canvas, debug) {
-    this.canvas = canvas;
-    this.debug = debug;
-    this.init();
-  }
-  init() {
-    this.snapshot_buffer = null;
-    this.snapshot_timer = 0;
-    this.back_buffer = null;
-    this.image_decoder = this.new_image_decoder();
-    this.video_decoder = this.new_video_decoder();
-    this.flush_seqs = []; //flush packets sequence numbers
-    this.pending_processing = new Map();
-    this.pending_decode = new Map();
-    this.closed = false;
-    this.animation_request = 0;
-  }
-
-  update_geometry(w, h) {
-    if (this.closed) {
-      return;
-    }
-    this.take_snapshot();
-    if (this.canvas.width == w && this.canvas.height == h) {
-      //unchanged
-      return;
-    }
-    this.canvas.width = w;
-    this.canvas.height = h;
-    if (this.snapshot_buffer) {
-      this.snapshot_buffer.width = w;
-      this.snapshot_buffer.height = h;
-    }
-    if (this.back_buffer) {
-      this.init_back_buffer();
-    }
-  }
 
-  init_back_buffer() {
-    const old_back_buffer = this.back_buffer;
-    this.back_buffer = new OffscreenCanvas(
-      this.canvas.width,
-      this.canvas.height
-    );
-    const context = this.back_buffer.getContext("2d");
-    context.imageSmoothingEnabled = false;
-    if (
-      old_back_buffer &&
-      old_back_buffer.width > 0 &&
-      old_back_buffer.height > 0
-    ) {
-      context.drawImage(old_back_buffer, 0, 0);
-    }
-  }
-
-  eos() {
-    if (this.video_decoder) {
-      this.video_decoder._close();
-    }
-  }
 
-  close() {
-    if (!this.closed) {
-      this.closed = true;
-      this.eos();
-    }
-    this.cancel_animation_request();
-    this.cancel_snapshot_timer();
-    this.back_buffer = null;
-    this.snapshot_buffer = null;
-  }
+const all_encodings = new Set([
+    "void",
+    "scroll",
+    ...image_coding,
+    ...video_coding,
+]);
 
-  cancel_animation_request() {
-    if (this.animation_request > 0) {
-      if (vsync) {
-        cancelAnimationFrame(this.animation_request);
-      } else {
-        clearTimeout(this.animation_request);
-      }
-      this.animation_request = 0;
-    }
-  }
-  cancel_snapshot_timer() {
-    if (this.snapshot_timer > 0) {
-      clearTimeout(this.snapshot_timer);
-      this.snapshot_timer = 0;
-    }
-  }
+function send_decode_error(packet, error) {
+    packet[7] = null;
+    self.postMessage({ error: `${error}`, packet });
+}
 
-  new_image_decoder() {
-    const image_decoder = new XpraImageDecoder();
-    image_decoder.on_frame_decoded = (packet) => this.packet_decoded(packet);
-    image_decoder.on_frame_error = (packet, error) =>
-      this.decode_error(packet, error);
-    return image_decoder;
-  }
-  new_video_decoder() {
-    const video_decoder = new XpraVideoDecoder();
-    video_decoder.on_frame_decoded = (packet) => this.packet_decoded(packet);
-    video_decoder.on_frame_error = (packet, error) =>
-      this.decode_error(packet, error);
-    return video_decoder;
-  }
 
-  //we've received a draw packet,
-  //either call decode_packet or save it for later
-  //(pending_processing)
-  decode_draw_packet(packet) {
-    const packet_sequence = packet[8];
-    const options = packet[10] || {};
-    const flush = options["flush"] || 0;
-    if (this.closed) {
-      return;
-    }
-    if (flush == 0) {
-      //this is a 'flush' fence packet, record it:
-      this.flush_seqs.push(packet_sequence);
-    }
-    //decide if we want to decode it immediately:
-    if (this.flush_seqs.length === 0 || packet_sequence <= this.flush_seqs[0]) {
-      this.decode_packet(packet);
-      return;
+class WindowDecoder {
+    constructor(canvas, debug) {
+        this.canvas = canvas;
+        this.debug = debug;
+        this.init();
     }
-    //or wait:
-    this.pending_processing.set(packet_sequence, packet);
-  }
+    init() {
+        this.image_decoder = new XpraBitmapDecoder();
+        this.video_decoder = new XpraVideoDecoder();
 
-  may_decode_more() {
-    if (this.flush_seqs.length === 0) {
-      //anything pending is for a flush sequence that we have not received yet,
-      //so we can paint them all now:
-      this.process_all(0);
-      //and the upcoming flush packet will trigger next_frame()
-      return;
+        this.decode_queue = [];
+        this.decode_queue_draining = false;
     }
-    const flush_seq = this.flush_seqs[0];
-    //process any pending paints for the new current flush sequence no:
-    this.process_all(flush_seq);
-    //if there are any packets waiting to be processed or decoded for this flush sequence no,
-    //then we have to stop there and wait to be called again:
-    const processing_wait = [...this.pending_processing.keys()].filter(
-      (x) => x <= flush_seq
-    );
-    if (processing_wait.length > 0) {
-      return;
-    }
-    const decode_wait = [...this.pending_decode.keys()].filter(
-      (x) => x <= flush_seq
-    );
-    if (decode_wait.length > 0) {
-      return;
-    }
-    //otherwise, we have just painted this screen update fully:
-    this.schedule_show_frame();
-  }
 
-  process_all(max_seq) {
-    //process packets up to max_seq,
-    //in ascending order:
-    const seqs = [...this.pending_processing.keys()].sort((a, b) => a - b);
-    for (const seq of seqs) {
-      if (max_seq > 0 && seq > max_seq) {
-        continue;
-      }
-      const packet = this.pending_processing.get(seq);
-      this.pending_processing.delete(seq);
-      this.decode_packet(packet);
+    decode_error(packet, error) {
+        const coding = packet[6];
+        const packet_sequence = packet[8];
+        const message = `failed to decode '${coding}' draw packet sequence ${packet_sequence}: ${error}`;
+        console.error(message);
+        packet[7] = null;
+        send_decode_error(packet, message);
     }
-  }
 
-  decode_packet(packet) {
-    const packet_sequence = packet[8];
-    const coding = packet[6];
-    //record this packet as pending:
-    this.pending_decode.set(packet_sequence, performance.now());
-    try {
-      if (coding == "scroll" || coding == "void") {
-        //nothing to do:
-        this.packet_decoded(packet);
-      } else if (image_coding.includes(coding)) {
-        this.image_decoder.queue_frame(packet);
-      } else if (video_coding.includes(coding)) {
-        // Add to video queue
-        if (!this.video_decoder.initialized) {
-          // Init with width and heigth of this packet.
-          // TODO: Use video max-size? It does not seem to matter.
-          this.video_decoder.init(packet[4], packet[5]);
+    queue_draw_packet(packet) {
+        if (this.closed) {
+            return;
+        }
+        this.decode_queue.push(packet);
+        if (!this.decode_queue_draining) {
+            this.proccess_decode_queue();
         }
-        this.video_decoder.queue_frame(packet);
-      } else {
-        this.decode_error(packet, `unsupported encoding: '${coding}'`);
-      }
-    } catch (error) {
-      this.decode_error(packet, `${error}`);
-    }
-  }
-
-  decode_error(packet, error) {
-    this.close();
-    this.init();
-    const coding = packet[6];
-    const packet_sequence = packet[8];
-    const message = `failed to decode '${coding}' draw packet sequence ${packet_sequence}: ${error}`;
-    console.error(message);
-    packet[7] = null;
-    send_decode_error(packet, message);
-  }
-
-  packet_decoded(packet) {
-    try {
-      const coding = packet[6];
-      const packet_sequence = packet[8];
-      const start = this.pending_decode.get(packet_sequence);
-      if (!this.pending_decode.delete(packet_sequence)) {
-        //already cancelled somehow
-        return;
-      }
-      if (coding == "throttle") {
-        // Encoding throttle is used to slow down frame input
-        const timeout = 500;
-        setTimeout(() => {
-          this.send_decode_ok(packet, start);
-        }, timeout);
-      } else {
-        this.send_decode_ok(packet, start);
-      }
-      if (this.closed) {
-        return;
-      }
-
-      this.paint_packet(packet);
-
-      //any snapshot is now out of date:
-      this.snapshot_buffer = null;
-
-      //are there any packets still waiting to be decoded?
-      if (this.flush_seqs.length === 0) {
-        return;
-      }
-      //for the current flush sequence?
-      const flush_seq = this.flush_seqs[0];
-      const decode_wait = [...this.pending_decode.keys()].filter(
-        (x) => x <= flush_seq
-      );
-      if (decode_wait.length > 0) {
-        //yes, found some pending decodes with a sequence number lower than the current flush
-        return;
-      }
-      //we're going to have a snapshot ready (when using the back buffer),
-      //or we're going to schedule a take_snapshot()
-      //so we can safely cancel the current timer:
-      this.cancel_snapshot_timer();
-
-      this.schedule_show_frame();
-    } catch (error) {
-      console.error("error handling decoded packet:", error);
-      this.decode_error(packet, error);
     }
-  }
 
-  schedule_show_frame() {
-    //move to the next frame at the next vsync:
-    this.animation_request = vsync
-      ? requestAnimationFrame((t) => {
-          this.animation_request = 0;
-          this.next_frame();
+    proccess_decode_queue() {
+        this.decode_queue_draining = true;
+        const packet = this.decode_queue.shift();
+        this.proccess_packet(packet).then(() => {
+            if (this.decode_queue.length > 0) {
+                // Next
+                this.proccess_decode_queue();
+            } else {
+                this.decode_queue_draining = false;
+            }
         })
-      : setTimeout(() => {
-          this.animation_request = 0;
-          this.next_frame();
-        }, 16);
-  }
-
-  next_frame() {
-    //there are no more pending decodes for the current flush sequence no
-    //so it can be removed:
-    this.flush_seqs.shift();
-    this.show_frame();
-    //we can start decoding the next frame:
-    this.may_decode_more();
-  }
-
-  show_frame() {
-    //we can update the canvas front buffer
-    //if we were using a back buffer to draw the screen updates:
-    if (this.back_buffer) {
-      this.back_to_front();
-    } else {
-      //schedule a capture of the front buffer contents:
-      this.snapshot_timer = setTimeout(() => this.take_snapshot(), 100);
     }
-  }
 
-  send_decode_ok(packet, start) {
-    //copy the packet so we can zero out the data:
-    const clone = [...packet];
-    const options = clone[10] || {};
-    const decode_time = Math.round(1000 * (performance.now() - start));
-    options["decode_time"] = Math.max(0, decode_time);
-    clone[6] = "offscreen-painted";
-    clone[7] = null;
-    clone[10] = options;
-    self.postMessage({ draw: clone, start });
-  }
+    async proccess_packet(packet) {
+        let coding = packet[6];
 
-  paint_packet(packet) {
-    if (this.closed) {
-      this.decode_error(packet, "decoder is closed");
-      return;
-    }
-    const x = packet[2];
-    const y = packet[3];
-    const width = packet[4];
-    const height = packet[5];
-    const coding_fmt = packet[6];
-    const data = packet[7];
-
-    const canvas = this.back_buffer || this.canvas;
-    let context = canvas.getContext("2d");
-    context.imageSmoothingEnabled = false;
-
-    const parts = coding_fmt.split(":"); //ie: "bitmap:rgb24" or "image:jpeg"
-    const coding = parts[0]; //ie: "bitmap"
-    const paint_box = () => {
-      if (!this.debug) {
-        return;
-      }
-      const source_encoding = parts[1] || ""; //ie: "rgb24"
-      const box_color = DEFAULT_BOX_COLORS[source_encoding];
-      if (box_color) {
-        //ie: "orange"
-        this.paint_box(context, box_color, x, y, width, height);
-      }
-    };
+        const start = performance.now();
+        if (coding == "eos" && this.video_decoder) {
+            this.video_decoder._close();
+            return;
+        }
+        else if (image_coding.includes(coding) && !(coding == "scroll" || coding == "void")) {
+            await this.image_decoder.convertToBitmap(packet);
+        } else if (video_coding.includes(coding)) {
+            if (!this.video_decoder.initialized) {
+                // Init with width and heigth of this packet.
+                // TODO: Use video max-size? It does not seem to matter.
+                this.video_decoder.init(packet[4], packet[5]);
+            }
+            await this.video_decoder.queue_frame(packet);
+        } else {
+            this.decode_error(packet, `unsupported encoding: '${coding}'`);
+        }
 
-    if (coding == "bitmap") {
-      // RGB is transformed to bitmap
-      context.clearRect(x, y, width, height);
-      context.drawImage(data, x, y, width, height);
-      paint_box();
-    } else if (coding == "image") {
-      // All others are transformed to VideoFrame
-      context.clearRect(x, y, width, height);
-      context.drawImage(data.image, x, y, width, height);
-      data.image.close();
-      paint_box();
-    } else if (coding == "scroll") {
-      this.init_back_buffer();
-      context = this.back_buffer.getContext("2d");
-      context.imageSmoothingEnabled = false;
-      for (let index = 0, stop = data.length; index < stop; ++index) {
-        const scroll_data = data[index];
-        const sx = scroll_data[0];
-        const sy = scroll_data[1];
-        const sw = scroll_data[2];
-        const sh = scroll_data[3];
-        const xdelta = scroll_data[4];
-        const ydelta = scroll_data[5];
-        context.drawImage(
-          this.canvas,
-          sx,
-          sy,
-          sw,
-          sh,
-          sx + xdelta,
-          sy + ydelta,
-          sw,
-          sh
-        );
-        if (this.debug) {
-          this.paint_box(context, "brown", sx + xdelta, sy + ydelta, sw, sh);
+        // Update the coding propery
+        coding = packet[6];
+        const x = packet[2];
+        const y = packet[3];
+        const width = packet[4];
+        const height = packet[5];
+        const data = packet[7];
+
+        let context = this.canvas.getContext("2d");
+        if (coding.startsWith("bitmap")) {
+            // Bitmap paint
+            context.imageSmoothingEnabled = false;
+            context.clearRect(x, y, width, height);
+            context.drawImage(data, x, y, width, height);
+            this.paint_box(coding, context, x, y, width, height);
+        } else if (coding == "scroll") {
+            context.imageSmoothingEnabled = false;
+            for (let index = 0, stop = data.length; index < stop; ++index) {
+                const scroll_data = data[index];
+                const sx = scroll_data[0];
+                const sy = scroll_data[1];
+                const sw = scroll_data[2];
+                const sh = scroll_data[3];
+                const xdelta = scroll_data[4];
+                const ydelta = scroll_data[5];
+                context.drawImage(
+                    this.canvas,
+                    sx,
+                    sy,
+                    sw,
+                    sh,
+                    sx + xdelta,
+                    sy + ydelta,
+                    sw,
+                    sh
+                );
+                this.paint_box(coding, context, sx, sy, sw, sh);
+            }
+        } else if (coding.startsWith("frame")) {
+            let enc_width = width;
+            let enc_height = height;
+            const options = packet[10] || {};
+            const scaled_size = options["scaled_size"];
+            if (scaled_size && (enc_width > width || enc_height > height)) {
+                enc_width = scaled_size[0];
+                enc_height = scaled_size[1];
+            }
+            context.drawImage(data, x, y, enc_width, enc_height);
+            data.close();
+            this.paint_box(coding, context, x, y, enc_width, enc_height);
         }
-      }
-    } else if (coding == "frame") {
-      let enc_width = width;
-      let enc_height = height;
-      const options = packet[10] || {};
-      const scaled_size = options["scaled_size"];
-      if (scaled_size) {
-        enc_width = scaled_size[0];
-        enc_height = scaled_size[1];
-      }
-      context.drawImage(data, x, y, enc_width, enc_height);
-      data.close();
-      paint_box();
-    } else if (coding == "throttle") {
-      //we are skipping this frame
-    } else if (coding == "void") {
-      //nothing to do
-    } else {
-      this.decode_error(packet, `unsupported encoding: ${coding}`);
-    }
-    const options = packet[10] || {};
-    const flush = options["flush"] || 0;
-    if (flush == 0 && context.commit) {
-      context.commit();
-    }
-  }
 
-  paint_box(context, color, px, py, pw, ph) {
-    if (color) {
-      context.strokeStyle = color;
-      context.lineWidth = 2;
-      context.strokeRect(px, py, pw, ph);
+        // Decode ok.
+        const options = packet[10] || {};
+        const decode_time = Math.round(1000 * (performance.now() - start));
+        options["decode_time"] = Math.max(0, decode_time);
+        packet[6] = "offscreen-painted";
+        packet[7] = null;
+        packet[10] = options;
+        self.postMessage({ draw: packet, start });
     }
-  }
 
-  back_to_front() {
-    if (!this.back_buffer) {
-      //no back buffer to put on screen!?
-      return;
-    }
-    if (this.closed) {
-      console.warn("cannot redraw, the decoder is closed");
-      return;
+    paint_box(coding, context, px, py, pw, ph) {
+        if (!this.debug) {
+            return;
+        }
+        const source_encoding = coding.split(":")[1] || ""; //ie: "rgb24"
+        const box_color = DEFAULT_BOX_COLORS[source_encoding];
+        if (box_color) {
+            context.strokeStyle = box_color;
+            context.lineWidth = 2;
+            context.strokeRect(px, py, pw, ph);
+        }
     }
-    //to show this buffer, just move it to the snapshot canvas
-    //and call redraw() to paint that:
-    this.snapshot_buffer = this.back_buffer;
-    this.back_buffer = null;
-    this.redraw();
-  }
 
-  redraw() {
-    if (!this.snapshot_buffer) {
-      return;
+    eos() {
+        // Add eos packet to queue to prevent closing the decoder before all packets are proceeded
+        const packet = [];
+        packet[6] = "eos";
+        this.decode_queue.push(packet);
     }
-    const context = this.canvas.getContext("2d");
-    context.imageSmoothingEnabled = false;
-    context.drawImage(this.snapshot_buffer, 0, 0);
-    if (context.commit) {
-      context.commit();
+
+    update_geometry(w, h) {
+        if (this.closed) {
+            return;
+        }
+        if (this.canvas.width == w && this.canvas.height == h) {
+            //unchanged
+            return;
+        }
+        this.canvas.width = w;
+        this.canvas.height = h;
     }
-  }
 
-  take_snapshot() {
-    this.snapshot_timer = 0;
-    const w = this.canvas.width;
-    const h = this.canvas.height;
-    if (w > 0 && h > 0) {
-      this.snapshot_buffer = new OffscreenCanvas(w, h);
-      const context = this.snapshot_buffer.getContext("2d");
-      context.imageSmoothingEnabled = false;
-      context.drawImage(this.canvas, 0, 0);
+    close() {
+        if (!this.closed) {
+            this.closed = true;
+            this.eos();
+        }
     }
-  }
 }
 
 onmessage = function (e) {
-  const data = e.data;
-  let wd = null;
-  switch (data.cmd) {
-    case "check": {
-      // We do not check. We are here because we support native decoding.
-      // TODO: Reconsider this. It might be a good thing to do some testing, just for sanity??
-      const encodings = [...data.encodings];
-      const common = encodings.filter((value) => all_encodings.has(value));
-      self.postMessage({ result: true, formats: common });
-      break;
-    }
-    case "eos":
-      wd = offscreen_canvas.get(data.wid);
-      if (wd) {
-        wd.eos();
-      }
-      break;
-    case "remove":
-      wd = offscreen_canvas.get(data.wid);
-      if (wd) {
-        wd.close();
-        offscreen_canvas.delete(data.wid);
-      }
-      break;
-    case "decode": {
-      const packet = data.packet;
-      const wid = packet[1];
-      wd = offscreen_canvas.get(wid);
-      if (wd) {
-        wd.decode_draw_packet(packet);
-      } else {
-        send_decode_error(
-          packet,
-          `no window decoder found for wid ${wid}, only:${[
-            ...offscreen_canvas.keys(),
-          ].join(",")}`
-        );
-      }
-      break;
+    const data = e.data;
+    let wd = null;
+    switch (data.cmd) {
+        case "check": {
+            // Check if we support the given encodings.
+            const encodings = [...data.encodings];
+            const common = encodings.filter((value) => all_encodings.has(value));
+            self.postMessage({ result: true, formats: common });
+            break;
+        }
+        case "eos":
+            wd = offscreen_canvas.get(data.wid);
+            if (wd) {
+                wd.eos();
+            }
+            break;
+        case "remove":
+            wd = offscreen_canvas.get(data.wid);
+            if (wd) {
+                wd.close();
+                offscreen_canvas.delete(data.wid);
+            }
+            break;
+        case "decode": {
+            const packet = data.packet;
+            const wid = packet[1];
+            wd = offscreen_canvas.get(wid);
+            if (wd) {
+                wd.queue_draw_packet(packet);
+            } else {
+                send_decode_error(packet, `no window decoder found for wid ${wid}, only:${[...offscreen_canvas.keys(),].join(",")}`);
+            }
+            break;
+        }
+        case "redraw":
+            wd = offscreen_canvas.get(data.wid);
+            if (wd) {
+                //wd.redraw();
+            }
+            break;
+        case "canvas":
+            console.log(
+                "canvas transfer for window",
+                data.wid,
+                ":",
+                data.canvas,
+                data.debug
+            );
+            if (data.canvas) {
+                offscreen_canvas.set(
+                    data.wid,
+                    new WindowDecoder(data.canvas, data.debug)
+                );
+            }
+            break;
+        case "canvas-geo":
+            wd = offscreen_canvas.get(data.wid);
+            if (wd) {
+                wd.update_geometry(data.w, data.h);
+            } else {
+                console.warn(
+                    "cannot update canvas geometry, window",
+                    data.wid,
+                    "not found"
+                );
+            }
+            break;
+        default:
+            console.error(`Offscreen decode worker got unknown message: ${data.cmd}`);
     }
-    case "redraw":
-      wd = offscreen_canvas.get(data.wid);
-      if (wd) {
-        wd.redraw();
-      }
-      break;
-    case "canvas":
-      console.log(
-        "canvas transfer for window",
-        data.wid,
-        ":",
-        data.canvas,
-        data.debug
-      );
-      if (data.canvas) {
-        offscreen_canvas.set(
-          data.wid,
-          new WindowDecoder(data.canvas, data.debug)
-        );
-      }
-      break;
-    case "canvas-geo":
-      wd = offscreen_canvas.get(data.wid);
-      if (wd) {
-        wd.update_geometry(data.w, data.h);
-      } else {
-        console.warn(
-          "cannot update canvas geometry, window",
-          data.wid,
-          "not found"
-        );
-      }
-      break;
-    default:
-      console.error(`Offscreen decode worker got unknown message: ${data.cmd}`);
-  }
 };
diff --git a/html5/js/OffscreenDecodeWorkerHelper.js b/html5/js/OffscreenDecodeWorkerHelper.js
index fcf88dd2..4fdea0b8 100644
--- a/html5/js/OffscreenDecodeWorkerHelper.js
+++ b/html5/js/OffscreenDecodeWorkerHelper.js
@@ -9,14 +9,11 @@
 
 /*
  * Helper for offscreen decoding and painting.
- * Requires Chrome 94+ or Android and a secure (SSL or localhost) context.
  */
 
 const XpraOffscreenWorker = {
   isAvailable() {
     if (
-      XpraImageDecoderLoader.hasNativeDecoder() &&
-      XpraVideoDecoderLoader.hasNativeDecoder &&
       typeof OffscreenCanvas !== "undefined"
     ) {
       //we also need the direct constructor:
@@ -28,7 +25,7 @@ const XpraOffscreenWorker = {
       }
     }
     console.warn(
-      "Offscreen decoding is not available. Please consider using Google Chrome 94+ in a secure (SSL or localhost) context for better performance."
+      "Offscreen decoding is not available. Please consider using Google Chrome for better performance."
     );
     return false;
   },
diff --git a/html5/js/VideoDecoder.js b/html5/js/VideoDecoder.js
index b1fd0af3..ccb99454 100644
--- a/html5/js/VideoDecoder.js
+++ b/html5/js/VideoDecoder.js
@@ -28,8 +28,9 @@ class XpraVideoDecoder {
     this.draining = false;
 
     this.decoder_queue = [];
+    this.decoded_frames = [];
+
     this.frame_threshold = 250;
-    this.on_frame_decoded = {}; //callback
     this.on_frame_error = (packet, error) => {
       console.error("VideoDecoder error on packet", packet, ":", error);
     };
@@ -90,7 +91,7 @@ class XpraVideoDecoder {
       const packet = current_frame.p;
       packet[6] = "throttle";
       packet[7] = null;
-      this.on_frame_decoded(packet);
+      this.decoded_frames.push(packet);
       return;
     }
 
@@ -99,13 +100,14 @@ class XpraVideoDecoder {
 
     // Latest possible check for draining
     if (this.draining) {
+
       videoFrame.close();
       return;
     }
 
     packet[6] = `frame:${packet[6]}`;
     packet[7] = videoFrame;
-    this.on_frame_decoded(packet, current_frame);
+    this.decoded_frames.push(packet);
   }
 
   _on_decoder_error(error) {
@@ -114,35 +116,46 @@ class XpraVideoDecoder {
   }
 
   queue_frame(packet) {
-    const options = packet[10] || {};
-    const data = packet[7];
-    decode_error = (error) => {
-      this.on_frame_error(packet, error);
-    };
+    return new Promise(async (resolve, reject) => {
+      const options = packet[10] || {};
+      const data = packet[7];
+      const packet_sequence = packet[8];
+
+      if (!this.had_first_key && options["type"] != "IDR") {
+        reject(`first frame must be a key frame but packet ${packet_sequence} is not.`);
+        return;
+      }
 
-    if (!this.had_first_key && options["type"] != "IDR") {
-      decode_error("first frame must be a key frame");
-      return;
-    }
+      if (this.videoDecoder.state == "closed") {
+        reject("video decoder is closed");
+        return;
+      }
+      if (this.draining) {
+        reject("video decoder is draining");
+        return;
+      }
 
-    if (this.videoDecoder.state == "closed") {
-      decode_error("video decoder is closed");
-      return;
-    }
-    if (this.draining) {
-      decode_error("video decoder is draining");
-      return;
-    }
+      this.had_first_key = true;
+      this.decoder_queue.push({ p: packet });
+      const init = {
+        type: options["type"] == "IDR" ? "key" : "delta",
+        data,
+        timestamp: options["frame"],
+      };
+      const chunk = new EncodedVideoChunk(init);
+      this.videoDecoder.decode(chunk);
+
+      let frame_out = this.decoded_frames.filter(p => p[8] == packet_sequence);
+      while (frame_out.length == 0) {
+        // Await our frame
+        await new Promise(r => setTimeout(r, 5));
+        frame_out = this.decoded_frames.filter(p => p[8] == packet_sequence);
+      }
+      // Remove the frame from decoded frames list
+      this.decoded_frames = this.decoded_frames.filter(p => p[8] != packet_sequence);
 
-    this.had_first_key = true;
-    this.decoder_queue.push({ p: packet });
-    const init = {
-      type: options["type"] == "IDR" ? "key" : "delta",
-      data,
-      timestamp: options["frame"],
-    };
-    const chunk = new EncodedVideoChunk(init);
-    this.videoDecoder.decode(chunk);
+      resolve(frame_out[0]);
+    });
   }
 
   _close() {

From 74950f7e2179b41c92928aea39722a9ab7666d48 Mon Sep 17 00:00:00 2001
From: tijzwa <tijzwa@vpo.nl>
Date: Tue, 19 Jul 2022 20:51:04 +0200
Subject: [PATCH 02/12] 2 spaces

---
 html5/js/BitmapDecoder.js         |  43 ---
 html5/js/ImageDecoder.js          |  42 +++
 html5/js/OffscreenDecodeWorker.js | 470 +++++++++++++++---------------
 3 files changed, 277 insertions(+), 278 deletions(-)
 delete mode 100644 html5/js/BitmapDecoder.js
 create mode 100644 html5/js/ImageDecoder.js

diff --git a/html5/js/BitmapDecoder.js b/html5/js/BitmapDecoder.js
deleted file mode 100644
index fdc3be9b..00000000
--- a/html5/js/BitmapDecoder.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * This file is part of Xpra.
- * Copyright (C) 2021 Tijs van der Zwaan <tijzwa@vpo.nl>
- * Licensed under MPL 2.0, see:
- * http://www.mozilla.org/MPL/2.0/
- *
- * This file replaces ImageDecoder.js
- */
-
-class XpraBitmapDecoder {
-
-    async convertToBitmap(packet) {
-        const width = packet[4];
-        const height = packet[5];
-        const coding = packet[6];
-        if (coding.startsWith("rgb")) {
-            const data = decode_rgb(packet);
-            const bitmap = await createImageBitmap(
-                new ImageData(new Uint8ClampedArray(data.buffer), width, height),
-                0,
-                0,
-                width,
-                height
-            );
-            packet[6] = `bitmap:${coding}`;
-            packet[7] = bitmap;
-        } else {
-            const paint_coding = coding.split("/")[0]; //ie: "png/P" -> "png"
-            const bitmap_options = {
-                premultiplyAlpha: "none",
-                resizeWidth : width,
-                resizeHeight: height,
-                resizeQuality: "medium"
-            };
-            
-            const blob = new Blob([packet[7].buffer], { type: `image/${paint_coding}` });
-            const bitmap = await createImageBitmap(blob, bitmap_options);
-            packet[6] = `bitmap:${coding}`;
-            packet[7] = bitmap;
-        }
-        return packet;
-    };
-}
diff --git a/html5/js/ImageDecoder.js b/html5/js/ImageDecoder.js
new file mode 100644
index 00000000..a621f635
--- /dev/null
+++ b/html5/js/ImageDecoder.js
@@ -0,0 +1,42 @@
+/*
+ * This file is part of Xpra.
+ * Copyright (C) 2021 Tijs van der Zwaan <tijzwa@vpo.nl>
+ * Licensed under MPL 2.0, see:
+ * http://www.mozilla.org/MPL/2.0/
+ *
+ */
+
+class XpraBitmapDecoder {
+
+  async convertToBitmap(packet) {
+    const width = packet[4];
+    const height = packet[5];
+    const coding = packet[6];
+    if (coding.startsWith("rgb")) {
+      const data = decode_rgb(packet);
+      const bitmap = await createImageBitmap(
+        new ImageData(new Uint8ClampedArray(data.buffer), width, height),
+        0,
+        0,
+        width,
+        height
+      );
+      packet[6] = `bitmap:${coding}`;
+      packet[7] = bitmap;
+    } else {
+      const paint_coding = coding.split("/")[0]; //ie: "png/P" -> "png"
+      const bitmap_options = {
+        premultiplyAlpha: "none",
+        resizeWidth: width,
+        resizeHeight: height,
+        resizeQuality: "medium"
+      };
+
+      const blob = new Blob([packet[7].buffer], { type: `image/${paint_coding}` });
+      const bitmap = await createImageBitmap(blob, bitmap_options);
+      packet[6] = `bitmap:${coding}`;
+      packet[7] = bitmap;
+    }
+    return packet;
+  };
+}
diff --git a/html5/js/OffscreenDecodeWorker.js b/html5/js/OffscreenDecodeWorker.js
index 84193db3..259d579c 100644
--- a/html5/js/OffscreenDecodeWorker.js
+++ b/html5/js/OffscreenDecodeWorker.js
@@ -22,277 +22,277 @@ importScripts("./Constants.js");
 const offscreen_canvas = new Map();
 
 const image_coding = [
-    "rgb",
-    "rgb32",
-    "rgb24",
-    "jpeg",
-    "png",
-    "png/P",
-    "png/L",
-    "webp",
-    "avif",
+  "rgb",
+  "rgb32",
+  "rgb24",
+  "jpeg",
+  "png",
+  "png/P",
+  "png/L",
+  "webp",
+  "avif",
 ];
 const video_coding = [];
 if (XpraVideoDecoderLoader.hasNativeDecoder) {
-    // We can support native H264 decoding
-    video_coding.push("h264");
+  // We can support native H264 decoding
+  video_coding.push("h264");
 } else {
-    console.warn("Offscreen decoding is available for images only. Please consider using Google Chrome 94+ in a secure (SSL or localhost) context h264 offscreen decoding support.");
+  console.warn("Offscreen decoding is available for images only. Please consider using Google Chrome 94+ in a secure (SSL or localhost) context h264 offscreen decoding support.");
 }
 
 
 
 const all_encodings = new Set([
-    "void",
-    "scroll",
-    ...image_coding,
-    ...video_coding,
+  "void",
+  "scroll",
+  ...image_coding,
+  ...video_coding,
 ]);
 
 function send_decode_error(packet, error) {
-    packet[7] = null;
-    self.postMessage({ error: `${error}`, packet });
+  packet[7] = null;
+  self.postMessage({ error: `${error}`, packet });
 }
 
 
 class WindowDecoder {
-    constructor(canvas, debug) {
-        this.canvas = canvas;
-        this.debug = debug;
-        this.init();
-    }
-    init() {
-        this.image_decoder = new XpraBitmapDecoder();
-        this.video_decoder = new XpraVideoDecoder();
+  constructor(canvas, debug) {
+    this.canvas = canvas;
+    this.debug = debug;
+    this.init();
+  }
+  init() {
+    this.image_decoder = new XpraBitmapDecoder();
+    this.video_decoder = new XpraVideoDecoder();
 
-        this.decode_queue = [];
-        this.decode_queue_draining = false;
-    }
+    this.decode_queue = [];
+    this.decode_queue_draining = false;
+  }
 
-    decode_error(packet, error) {
-        const coding = packet[6];
-        const packet_sequence = packet[8];
-        const message = `failed to decode '${coding}' draw packet sequence ${packet_sequence}: ${error}`;
-        console.error(message);
-        packet[7] = null;
-        send_decode_error(packet, message);
-    }
+  decode_error(packet, error) {
+    const coding = packet[6];
+    const packet_sequence = packet[8];
+    const message = `failed to decode '${coding}' draw packet sequence ${packet_sequence}: ${error}`;
+    console.error(message);
+    packet[7] = null;
+    send_decode_error(packet, message);
+  }
 
-    queue_draw_packet(packet) {
-        if (this.closed) {
-            return;
-        }
-        this.decode_queue.push(packet);
-        if (!this.decode_queue_draining) {
-            this.proccess_decode_queue();
-        }
+  queue_draw_packet(packet) {
+    if (this.closed) {
+      return;
     }
-
-    proccess_decode_queue() {
-        this.decode_queue_draining = true;
-        const packet = this.decode_queue.shift();
-        this.proccess_packet(packet).then(() => {
-            if (this.decode_queue.length > 0) {
-                // Next
-                this.proccess_decode_queue();
-            } else {
-                this.decode_queue_draining = false;
-            }
-        })
+    this.decode_queue.push(packet);
+    if (!this.decode_queue_draining) {
+      this.proccess_decode_queue();
     }
+  }
 
-    async proccess_packet(packet) {
-        let coding = packet[6];
+  proccess_decode_queue() {
+    this.decode_queue_draining = true;
+    const packet = this.decode_queue.shift();
+    this.proccess_packet(packet).then(() => {
+      if (this.decode_queue.length > 0) {
+        // Next
+        this.proccess_decode_queue();
+      } else {
+        this.decode_queue_draining = false;
+      }
+    })
+  }
 
-        const start = performance.now();
-        if (coding == "eos" && this.video_decoder) {
-            this.video_decoder._close();
-            return;
-        }
-        else if (image_coding.includes(coding) && !(coding == "scroll" || coding == "void")) {
-            await this.image_decoder.convertToBitmap(packet);
-        } else if (video_coding.includes(coding)) {
-            if (!this.video_decoder.initialized) {
-                // Init with width and heigth of this packet.
-                // TODO: Use video max-size? It does not seem to matter.
-                this.video_decoder.init(packet[4], packet[5]);
-            }
-            await this.video_decoder.queue_frame(packet);
-        } else {
-            this.decode_error(packet, `unsupported encoding: '${coding}'`);
-        }
+  async proccess_packet(packet) {
+    let coding = packet[6];
 
-        // Update the coding propery
-        coding = packet[6];
-        const x = packet[2];
-        const y = packet[3];
-        const width = packet[4];
-        const height = packet[5];
-        const data = packet[7];
+    const start = performance.now();
+    if (coding == "eos" && this.video_decoder) {
+      this.video_decoder._close();
+      return;
+    }
+    else if (image_coding.includes(coding) && !(coding == "scroll" || coding == "void")) {
+      await this.image_decoder.convertToBitmap(packet);
+    } else if (video_coding.includes(coding)) {
+      if (!this.video_decoder.initialized) {
+        // Init with width and heigth of this packet.
+        // TODO: Use video max-size? It does not seem to matter.
+        this.video_decoder.init(packet[4], packet[5]);
+      }
+      await this.video_decoder.queue_frame(packet);
+    } else {
+      this.decode_error(packet, `unsupported encoding: '${coding}'`);
+    }
 
-        let context = this.canvas.getContext("2d");
-        if (coding.startsWith("bitmap")) {
-            // Bitmap paint
-            context.imageSmoothingEnabled = false;
-            context.clearRect(x, y, width, height);
-            context.drawImage(data, x, y, width, height);
-            this.paint_box(coding, context, x, y, width, height);
-        } else if (coding == "scroll") {
-            context.imageSmoothingEnabled = false;
-            for (let index = 0, stop = data.length; index < stop; ++index) {
-                const scroll_data = data[index];
-                const sx = scroll_data[0];
-                const sy = scroll_data[1];
-                const sw = scroll_data[2];
-                const sh = scroll_data[3];
-                const xdelta = scroll_data[4];
-                const ydelta = scroll_data[5];
-                context.drawImage(
-                    this.canvas,
-                    sx,
-                    sy,
-                    sw,
-                    sh,
-                    sx + xdelta,
-                    sy + ydelta,
-                    sw,
-                    sh
-                );
-                this.paint_box(coding, context, sx, sy, sw, sh);
-            }
-        } else if (coding.startsWith("frame")) {
-            let enc_width = width;
-            let enc_height = height;
-            const options = packet[10] || {};
-            const scaled_size = options["scaled_size"];
-            if (scaled_size && (enc_width > width || enc_height > height)) {
-                enc_width = scaled_size[0];
-                enc_height = scaled_size[1];
-            }
-            context.drawImage(data, x, y, enc_width, enc_height);
-            data.close();
-            this.paint_box(coding, context, x, y, enc_width, enc_height);
-        }
+    // Update the coding propery
+    coding = packet[6];
+    const x = packet[2];
+    const y = packet[3];
+    const width = packet[4];
+    const height = packet[5];
+    const data = packet[7];
 
-        // Decode ok.
-        const options = packet[10] || {};
-        const decode_time = Math.round(1000 * (performance.now() - start));
-        options["decode_time"] = Math.max(0, decode_time);
-        packet[6] = "offscreen-painted";
-        packet[7] = null;
-        packet[10] = options;
-        self.postMessage({ draw: packet, start });
+    let context = this.canvas.getContext("2d");
+    if (coding.startsWith("bitmap")) {
+      // Bitmap paint
+      context.imageSmoothingEnabled = false;
+      context.clearRect(x, y, width, height);
+      context.drawImage(data, x, y, width, height);
+      this.paint_box(coding, context, x, y, width, height);
+    } else if (coding == "scroll") {
+      context.imageSmoothingEnabled = false;
+      for (let index = 0, stop = data.length; index < stop; ++index) {
+        const scroll_data = data[index];
+        const sx = scroll_data[0];
+        const sy = scroll_data[1];
+        const sw = scroll_data[2];
+        const sh = scroll_data[3];
+        const xdelta = scroll_data[4];
+        const ydelta = scroll_data[5];
+        context.drawImage(
+          this.canvas,
+          sx,
+          sy,
+          sw,
+          sh,
+          sx + xdelta,
+          sy + ydelta,
+          sw,
+          sh
+        );
+        this.paint_box(coding, context, sx, sy, sw, sh);
+      }
+    } else if (coding.startsWith("frame")) {
+      let enc_width = width;
+      let enc_height = height;
+      const options = packet[10] || {};
+      const scaled_size = options["scaled_size"];
+      if (scaled_size && (enc_width > width || enc_height > height)) {
+        enc_width = scaled_size[0];
+        enc_height = scaled_size[1];
+      }
+      context.drawImage(data, x, y, enc_width, enc_height);
+      data.close();
+      this.paint_box(coding, context, x, y, enc_width, enc_height);
     }
 
-    paint_box(coding, context, px, py, pw, ph) {
-        if (!this.debug) {
-            return;
-        }
-        const source_encoding = coding.split(":")[1] || ""; //ie: "rgb24"
-        const box_color = DEFAULT_BOX_COLORS[source_encoding];
-        if (box_color) {
-            context.strokeStyle = box_color;
-            context.lineWidth = 2;
-            context.strokeRect(px, py, pw, ph);
-        }
-    }
+    // Decode ok.
+    const options = packet[10] || {};
+    const decode_time = Math.round(1000 * (performance.now() - start));
+    options["decode_time"] = Math.max(0, decode_time);
+    packet[6] = "offscreen-painted";
+    packet[7] = null;
+    packet[10] = options;
+    self.postMessage({ draw: packet, start });
+  }
 
-    eos() {
-        // Add eos packet to queue to prevent closing the decoder before all packets are proceeded
-        const packet = [];
-        packet[6] = "eos";
-        this.decode_queue.push(packet);
+  paint_box(coding, context, px, py, pw, ph) {
+    if (!this.debug) {
+      return;
     }
+    const source_encoding = coding.split(":")[1] || ""; //ie: "rgb24"
+    const box_color = DEFAULT_BOX_COLORS[source_encoding];
+    if (box_color) {
+      context.strokeStyle = box_color;
+      context.lineWidth = 2;
+      context.strokeRect(px, py, pw, ph);
+    }
+  }
+
+  eos() {
+    // Add eos packet to queue to prevent closing the decoder before all packets are proceeded
+    const packet = [];
+    packet[6] = "eos";
+    this.decode_queue.push(packet);
+  }
 
-    update_geometry(w, h) {
-        if (this.closed) {
-            return;
-        }
-        if (this.canvas.width == w && this.canvas.height == h) {
-            //unchanged
-            return;
-        }
-        this.canvas.width = w;
-        this.canvas.height = h;
+  update_geometry(w, h) {
+    if (this.closed) {
+      return;
     }
+    if (this.canvas.width == w && this.canvas.height == h) {
+      //unchanged
+      return;
+    }
+    this.canvas.width = w;
+    this.canvas.height = h;
+  }
 
-    close() {
-        if (!this.closed) {
-            this.closed = true;
-            this.eos();
-        }
+  close() {
+    if (!this.closed) {
+      this.closed = true;
+      this.eos();
     }
+  }
 }
 
 onmessage = function (e) {
-    const data = e.data;
-    let wd = null;
-    switch (data.cmd) {
-        case "check": {
-            // Check if we support the given encodings.
-            const encodings = [...data.encodings];
-            const common = encodings.filter((value) => all_encodings.has(value));
-            self.postMessage({ result: true, formats: common });
-            break;
-        }
-        case "eos":
-            wd = offscreen_canvas.get(data.wid);
-            if (wd) {
-                wd.eos();
-            }
-            break;
-        case "remove":
-            wd = offscreen_canvas.get(data.wid);
-            if (wd) {
-                wd.close();
-                offscreen_canvas.delete(data.wid);
-            }
-            break;
-        case "decode": {
-            const packet = data.packet;
-            const wid = packet[1];
-            wd = offscreen_canvas.get(wid);
-            if (wd) {
-                wd.queue_draw_packet(packet);
-            } else {
-                send_decode_error(packet, `no window decoder found for wid ${wid}, only:${[...offscreen_canvas.keys(),].join(",")}`);
-            }
-            break;
-        }
-        case "redraw":
-            wd = offscreen_canvas.get(data.wid);
-            if (wd) {
-                //wd.redraw();
-            }
-            break;
-        case "canvas":
-            console.log(
-                "canvas transfer for window",
-                data.wid,
-                ":",
-                data.canvas,
-                data.debug
-            );
-            if (data.canvas) {
-                offscreen_canvas.set(
-                    data.wid,
-                    new WindowDecoder(data.canvas, data.debug)
-                );
-            }
-            break;
-        case "canvas-geo":
-            wd = offscreen_canvas.get(data.wid);
-            if (wd) {
-                wd.update_geometry(data.w, data.h);
-            } else {
-                console.warn(
-                    "cannot update canvas geometry, window",
-                    data.wid,
-                    "not found"
-                );
-            }
-            break;
-        default:
-            console.error(`Offscreen decode worker got unknown message: ${data.cmd}`);
+  const data = e.data;
+  let wd = null;
+  switch (data.cmd) {
+    case "check": {
+      // Check if we support the given encodings.
+      const encodings = [...data.encodings];
+      const common = encodings.filter((value) => all_encodings.has(value));
+      self.postMessage({ result: true, formats: common });
+      break;
+    }
+    case "eos":
+      wd = offscreen_canvas.get(data.wid);
+      if (wd) {
+        wd.eos();
+      }
+      break;
+    case "remove":
+      wd = offscreen_canvas.get(data.wid);
+      if (wd) {
+        wd.close();
+        offscreen_canvas.delete(data.wid);
+      }
+      break;
+    case "decode": {
+      const packet = data.packet;
+      const wid = packet[1];
+      wd = offscreen_canvas.get(wid);
+      if (wd) {
+        wd.queue_draw_packet(packet);
+      } else {
+        send_decode_error(packet, `no window decoder found for wid ${wid}, only:${[...offscreen_canvas.keys(),].join(",")}`);
+      }
+      break;
     }
+    case "redraw":
+      wd = offscreen_canvas.get(data.wid);
+      if (wd) {
+        //wd.redraw();
+      }
+      break;
+    case "canvas":
+      console.log(
+        "canvas transfer for window",
+        data.wid,
+        ":",
+        data.canvas,
+        data.debug
+      );
+      if (data.canvas) {
+        offscreen_canvas.set(
+          data.wid,
+          new WindowDecoder(data.canvas, data.debug)
+        );
+      }
+      break;
+    case "canvas-geo":
+      wd = offscreen_canvas.get(data.wid);
+      if (wd) {
+        wd.update_geometry(data.w, data.h);
+      } else {
+        console.warn(
+          "cannot update canvas geometry, window",
+          data.wid,
+          "not found"
+        );
+      }
+      break;
+    default:
+      console.error(`Offscreen decode worker got unknown message: ${data.cmd}`);
+  }
 };

From bbd88a89132310e2d14672aca0726baccf5b961b Mon Sep 17 00:00:00 2001
From: tijzwa <tijzwa@vpo.nl>
Date: Tue, 19 Jul 2022 20:52:27 +0200
Subject: [PATCH 03/12] ImageDecoder

---
 html5/js/OffscreenDecodeWorker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/html5/js/OffscreenDecodeWorker.js b/html5/js/OffscreenDecodeWorker.js
index 259d579c..31a8567f 100644
--- a/html5/js/OffscreenDecodeWorker.js
+++ b/html5/js/OffscreenDecodeWorker.js
@@ -14,7 +14,7 @@
 importScripts("./lib/lz4.js");
 importScripts("./lib/broadway/Decoder.js");
 importScripts("./VideoDecoder.js");
-importScripts("./BitmapDecoder.js");
+importScripts("./ImageDecoder.js");
 importScripts("./RgbHelpers.js");
 importScripts("./Constants.js");
 

From 1f463e457363600731a5e6b68a88cea3e59fc5a2 Mon Sep 17 00:00:00 2001
From: tijzwa <tijzwa@vpo.nl>
Date: Tue, 19 Jul 2022 20:53:10 +0200
Subject: [PATCH 04/12] XpraImageDecoder

---
 html5/js/ImageDecoder.js          | 3 ++-
 html5/js/OffscreenDecodeWorker.js | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/html5/js/ImageDecoder.js b/html5/js/ImageDecoder.js
index a621f635..308b1df4 100644
--- a/html5/js/ImageDecoder.js
+++ b/html5/js/ImageDecoder.js
@@ -1,12 +1,13 @@
 /*
  * This file is part of Xpra.
  * Copyright (C) 2021 Tijs van der Zwaan <tijzwa@vpo.nl>
+ * Copyright (c) 2021 Antoine Martin <antoine@xpra.org>
  * Licensed under MPL 2.0, see:
  * http://www.mozilla.org/MPL/2.0/
  *
  */
 
-class XpraBitmapDecoder {
+class XpraImageDecoder {
 
   async convertToBitmap(packet) {
     const width = packet[4];
diff --git a/html5/js/OffscreenDecodeWorker.js b/html5/js/OffscreenDecodeWorker.js
index 31a8567f..10b378e8 100644
--- a/html5/js/OffscreenDecodeWorker.js
+++ b/html5/js/OffscreenDecodeWorker.js
@@ -62,7 +62,7 @@ class WindowDecoder {
     this.init();
   }
   init() {
-    this.image_decoder = new XpraBitmapDecoder();
+    this.image_decoder = new XpraImageDecoder();
     this.video_decoder = new XpraVideoDecoder();
 
     this.decode_queue = [];

From 35e18613f27534b3a09e4fc5b26896823a51b854 Mon Sep 17 00:00:00 2001
From: tijzwa <tijzwa@vpo.nl>
Date: Sun, 31 Jul 2022 13:02:08 +0200
Subject: [PATCH 05/12] fix void and scroll

---
 html5/js/OffscreenDecodeWorker.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/html5/js/OffscreenDecodeWorker.js b/html5/js/OffscreenDecodeWorker.js
index 10b378e8..7f7860ee 100644
--- a/html5/js/OffscreenDecodeWorker.js
+++ b/html5/js/OffscreenDecodeWorker.js
@@ -109,7 +109,10 @@ class WindowDecoder {
       this.video_decoder._close();
       return;
     }
-    else if (image_coding.includes(coding) && !(coding == "scroll" || coding == "void")) {
+    else if (coding == "scroll" || coding == "void") {
+      // Nothing to do
+    }
+    else if (image_coding.includes(coding)) {
       await this.image_decoder.convertToBitmap(packet);
     } else if (video_coding.includes(coding)) {
       if (!this.video_decoder.initialized) {

From 05a94f7d45c652d03c80a5cb079d0ad679c0bc11 Mon Sep 17 00:00:00 2001
From: tijzwa <tijzwa@vpo.nl>
Date: Mon, 1 Aug 2022 09:18:31 +0200
Subject: [PATCH 06/12] requestAnimationFrame in worker

---
 html5/js/OffscreenDecodeWorker.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/html5/js/OffscreenDecodeWorker.js b/html5/js/OffscreenDecodeWorker.js
index 7f7860ee..7863be31 100644
--- a/html5/js/OffscreenDecodeWorker.js
+++ b/html5/js/OffscreenDecodeWorker.js
@@ -125,8 +125,18 @@ class WindowDecoder {
       this.decode_error(packet, `unsupported encoding: '${coding}'`);
     }
 
+    // Paint the packet on screen refresh (if we can use requestAnimationFrame in the worker)
+    if (typeof requestAnimationFrame == "function") {
+      requestAnimationFrame(() => { this.paint_packet(packet, start);  })
+    } else {
+      console.warn("No function requestAnimationFrame in webworkers supported by this browser.");
+      this.paint_packet(packet, start);
+    }
+  }
+
+  paint_packet(packet, start) {
     // Update the coding propery
-    coding = packet[6];
+    const coding = packet[6];
     const x = packet[2];
     const y = packet[3];
     const width = packet[4];

From 7fc56e1f4e66d390563d369e01aaf790cf4fe25d Mon Sep 17 00:00:00 2001
From: tijzwa <tijzwa@vpo.nl>
Date: Mon, 1 Aug 2022 09:33:45 +0200
Subject: [PATCH 07/12] resizeQuality

---
 html5/js/ImageDecoder.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/html5/js/ImageDecoder.js b/html5/js/ImageDecoder.js
index 308b1df4..5d795ea6 100644
--- a/html5/js/ImageDecoder.js
+++ b/html5/js/ImageDecoder.js
@@ -30,7 +30,7 @@ class XpraImageDecoder {
         premultiplyAlpha: "none",
         resizeWidth: width,
         resizeHeight: height,
-        resizeQuality: "medium"
+        resizeQuality: "high"
       };
 
       const blob = new Blob([packet[7].buffer], { type: `image/${paint_coding}` });

From 62564172d3da008c20d7ddedb36040afd8b31d2b Mon Sep 17 00:00:00 2001
From: tijzwa <tijzwa@vpo.nl>
Date: Mon, 1 Aug 2022 09:45:43 +0200
Subject: [PATCH 08/12] width/height

---
 html5/js/OffscreenDecodeWorker.js | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/html5/js/OffscreenDecodeWorker.js b/html5/js/OffscreenDecodeWorker.js
index 7863be31..0678e682 100644
--- a/html5/js/OffscreenDecodeWorker.js
+++ b/html5/js/OffscreenDecodeWorker.js
@@ -174,17 +174,9 @@ class WindowDecoder {
         this.paint_box(coding, context, sx, sy, sw, sh);
       }
     } else if (coding.startsWith("frame")) {
-      let enc_width = width;
-      let enc_height = height;
-      const options = packet[10] || {};
-      const scaled_size = options["scaled_size"];
-      if (scaled_size && (enc_width > width || enc_height > height)) {
-        enc_width = scaled_size[0];
-        enc_height = scaled_size[1];
-      }
-      context.drawImage(data, x, y, enc_width, enc_height);
+      context.drawImage(data, x, y, width, height);
       data.close();
-      this.paint_box(coding, context, x, y, enc_width, enc_height);
+      this.paint_box(coding, context, x, y, width, height);
     }
 
     // Decode ok.

From c7cee45cf4a33581b2207ea8ac50142153d510bc Mon Sep 17 00:00:00 2001
From: tijzwa <tijzwa@vpo.nl>
Date: Mon, 1 Aug 2022 10:14:59 +0200
Subject: [PATCH 09/12] linting

---
 html5/js/ImageDecoder.js          |  9 +++++----
 html5/js/OffscreenDecodeWorker.js | 26 ++++++++++++++++----------
 html5/js/VideoDecoder.js          | 27 +++++++++++++++++----------
 3 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/html5/js/ImageDecoder.js b/html5/js/ImageDecoder.js
index 5d795ea6..b0ac6edd 100644
--- a/html5/js/ImageDecoder.js
+++ b/html5/js/ImageDecoder.js
@@ -8,7 +8,6 @@
  */
 
 class XpraImageDecoder {
-
   async convertToBitmap(packet) {
     const width = packet[4];
     const height = packet[5];
@@ -30,14 +29,16 @@ class XpraImageDecoder {
         premultiplyAlpha: "none",
         resizeWidth: width,
         resizeHeight: height,
-        resizeQuality: "high"
+        resizeQuality: "high",
       };
 
-      const blob = new Blob([packet[7].buffer], { type: `image/${paint_coding}` });
+      const blob = new Blob([packet[7].buffer], {
+        type: `image/${paint_coding}`,
+      });
       const bitmap = await createImageBitmap(blob, bitmap_options);
       packet[6] = `bitmap:${coding}`;
       packet[7] = bitmap;
     }
     return packet;
-  };
+  }
 }
diff --git a/html5/js/OffscreenDecodeWorker.js b/html5/js/OffscreenDecodeWorker.js
index 0678e682..6c019b7e 100644
--- a/html5/js/OffscreenDecodeWorker.js
+++ b/html5/js/OffscreenDecodeWorker.js
@@ -37,11 +37,11 @@ if (XpraVideoDecoderLoader.hasNativeDecoder) {
   // We can support native H264 decoding
   video_coding.push("h264");
 } else {
-  console.warn("Offscreen decoding is available for images only. Please consider using Google Chrome 94+ in a secure (SSL or localhost) context h264 offscreen decoding support.");
+  console.warn(
+    "Offscreen decoding is available for images only. Please consider using Google Chrome 94+ in a secure (SSL or localhost) context h264 offscreen decoding support."
+  );
 }
 
-
-
 const all_encodings = new Set([
   "void",
   "scroll",
@@ -54,7 +54,6 @@ function send_decode_error(packet, error) {
   self.postMessage({ error: `${error}`, packet });
 }
 
-
 class WindowDecoder {
   constructor(canvas, debug) {
     this.canvas = canvas;
@@ -98,12 +97,11 @@ class WindowDecoder {
       } else {
         this.decode_queue_draining = false;
       }
-    })
+    });
   }
 
   async proccess_packet(packet) {
     let coding = packet[6];
-
     const start = performance.now();
     if (coding == "eos" && this.video_decoder) {
       this.video_decoder._close();
@@ -124,12 +122,15 @@ class WindowDecoder {
     } else {
       this.decode_error(packet, `unsupported encoding: '${coding}'`);
     }
-
     // Paint the packet on screen refresh (if we can use requestAnimationFrame in the worker)
     if (typeof requestAnimationFrame == "function") {
-      requestAnimationFrame(() => { this.paint_packet(packet, start);  })
+      requestAnimationFrame(() => {
+        this.paint_packet(packet, start);
+      });
     } else {
-      console.warn("No function requestAnimationFrame in webworkers supported by this browser.");
+      console.warn(
+        "No function requestAnimationFrame in webworkers supported by this browser."
+      );
       this.paint_packet(packet, start);
     }
   }
@@ -260,7 +261,12 @@ onmessage = function (e) {
       if (wd) {
         wd.queue_draw_packet(packet);
       } else {
-        send_decode_error(packet, `no window decoder found for wid ${wid}, only:${[...offscreen_canvas.keys(),].join(",")}`);
+        send_decode_error(
+          packet,
+          `no window decoder found for wid ${wid}, only:${[
+            ...offscreen_canvas.keys(),
+          ].join(",")}`
+        );
       }
       break;
     }
diff --git a/html5/js/VideoDecoder.js b/html5/js/VideoDecoder.js
index ccb99454..290518db 100644
--- a/html5/js/VideoDecoder.js
+++ b/html5/js/VideoDecoder.js
@@ -100,7 +100,6 @@ class XpraVideoDecoder {
 
     // Latest possible check for draining
     if (this.draining) {
-
       videoFrame.close();
       return;
     }
@@ -116,22 +115,27 @@ class XpraVideoDecoder {
   }
 
   queue_frame(packet) {
+    // eslint-disable-next-line no-async-promise-executor
     return new Promise(async (resolve, reject) => {
       const options = packet[10] || {};
       const data = packet[7];
       const packet_sequence = packet[8];
 
       if (!this.had_first_key && options["type"] != "IDR") {
-        reject(`first frame must be a key frame but packet ${packet_sequence} is not.`);
+        reject(
+          new Error(
+            `first frame must be a key frame but packet ${packet_sequence} is not.`
+          )
+        );
         return;
       }
 
       if (this.videoDecoder.state == "closed") {
-        reject("video decoder is closed");
+        reject(new Error("video decoder is closed"));
         return;
       }
       if (this.draining) {
-        reject("video decoder is draining");
+        reject(new Error("video decoder is draining"));
         return;
       }
 
@@ -145,15 +149,18 @@ class XpraVideoDecoder {
       const chunk = new EncodedVideoChunk(init);
       this.videoDecoder.decode(chunk);
 
-      let frame_out = this.decoded_frames.filter(p => p[8] == packet_sequence);
-      while (frame_out.length == 0) {
+      let frame_out = this.decoded_frames.filter(
+        (p) => p[8] == packet_sequence
+      );
+      while (frame_out.length === 0) {
         // Await our frame
-        await new Promise(r => setTimeout(r, 5));
-        frame_out = this.decoded_frames.filter(p => p[8] == packet_sequence);
+        await new Promise((r) => setTimeout(r, 5));
+        frame_out = this.decoded_frames.filter((p) => p[8] == packet_sequence);
       }
       // Remove the frame from decoded frames list
-      this.decoded_frames = this.decoded_frames.filter(p => p[8] != packet_sequence);
-
+      this.decoded_frames = this.decoded_frames.filter(
+        (p) => p[8] != packet_sequence
+      );
       resolve(frame_out[0]);
     });
   }

From 0ff58a25d89a1ca3cb050808c79c694e37b2aded Mon Sep 17 00:00:00 2001
From: tijzwa <tijzwa@vpo.nl>
Date: Mon, 1 Aug 2022 10:17:47 +0200
Subject: [PATCH 10/12] linting

---
 html5/js/OffscreenDecodeWorker.js       | 6 ++----
 html5/js/OffscreenDecodeWorkerHelper.js | 4 +---
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/html5/js/OffscreenDecodeWorker.js b/html5/js/OffscreenDecodeWorker.js
index 6c019b7e..f4c235fd 100644
--- a/html5/js/OffscreenDecodeWorker.js
+++ b/html5/js/OffscreenDecodeWorker.js
@@ -106,11 +106,9 @@ class WindowDecoder {
     if (coding == "eos" && this.video_decoder) {
       this.video_decoder._close();
       return;
-    }
-    else if (coding == "scroll" || coding == "void") {
+    } else if (coding == "scroll" || coding == "void") {
       // Nothing to do
-    }
-    else if (image_coding.includes(coding)) {
+    } else if (image_coding.includes(coding)) {
       await this.image_decoder.convertToBitmap(packet);
     } else if (video_coding.includes(coding)) {
       if (!this.video_decoder.initialized) {
diff --git a/html5/js/OffscreenDecodeWorkerHelper.js b/html5/js/OffscreenDecodeWorkerHelper.js
index 4fdea0b8..fac23aef 100644
--- a/html5/js/OffscreenDecodeWorkerHelper.js
+++ b/html5/js/OffscreenDecodeWorkerHelper.js
@@ -13,9 +13,7 @@
 
 const XpraOffscreenWorker = {
   isAvailable() {
-    if (
-      typeof OffscreenCanvas !== "undefined"
-    ) {
+    if (typeof OffscreenCanvas !== "undefined") {
       //we also need the direct constructor:
       try {
         new OffscreenCanvas(256, 256);

From ce5fb8b7df57e5b716c5681dd796df1fe5387e87 Mon Sep 17 00:00:00 2001
From: tijzwa <tijzwa@vpo.nl>
Date: Mon, 1 Aug 2022 16:00:21 +0200
Subject: [PATCH 11/12] redraw

---
 html5/js/OffscreenDecodeWorker.js | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/html5/js/OffscreenDecodeWorker.js b/html5/js/OffscreenDecodeWorker.js
index f4c235fd..fcabfa5b 100644
--- a/html5/js/OffscreenDecodeWorker.js
+++ b/html5/js/OffscreenDecodeWorker.js
@@ -58,6 +58,7 @@ class WindowDecoder {
   constructor(canvas, debug) {
     this.canvas = canvas;
     this.debug = debug;
+    this.still = new OffscreenCanvas(this.canvas.width, this.canvas.height);
     this.init();
   }
   init() {
@@ -186,6 +187,10 @@ class WindowDecoder {
     packet[7] = null;
     packet[10] = options;
     self.postMessage({ draw: packet, start });
+
+    // Call update_still in callback
+    setTimeout(() => this.update_still(), 0);
+
   }
 
   paint_box(coding, context, px, py, pw, ph) {
@@ -201,6 +206,10 @@ class WindowDecoder {
     }
   }
 
+  update_still() {
+    this.still.getContext('2d').drawImage(this.canvas, 0, 0);
+  }
+
   eos() {
     // Add eos packet to queue to prevent closing the decoder before all packets are proceeded
     const packet = [];
@@ -208,6 +217,11 @@ class WindowDecoder {
     this.decode_queue.push(packet);
   }
 
+  redraw() {
+    // Redraw the last know state (saved on still)
+    this.canvas.getContext('2d').drawImage(this.still, 0, 0);
+  }
+
   update_geometry(w, h) {
     if (this.closed) {
       return;
@@ -218,6 +232,9 @@ class WindowDecoder {
     }
     this.canvas.width = w;
     this.canvas.height = h;
+    // Also update the still
+    this.still.width = w;
+    this.still.height = h;
   }
 
   close() {
@@ -271,7 +288,7 @@ onmessage = function (e) {
     case "redraw":
       wd = offscreen_canvas.get(data.wid);
       if (wd) {
-        //wd.redraw();
+        wd.redraw();
       }
       break;
     case "canvas":

From 73d6b19671bdc3cc385433777cfe3ba6d5c38965 Mon Sep 17 00:00:00 2001
From: tijzwa <tijzwa@vpo.nl>
Date: Mon, 1 Aug 2022 16:03:19 +0200
Subject: [PATCH 12/12] linting

---
 html5/js/OffscreenDecodeWorker.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/html5/js/OffscreenDecodeWorker.js b/html5/js/OffscreenDecodeWorker.js
index fcabfa5b..9550977f 100644
--- a/html5/js/OffscreenDecodeWorker.js
+++ b/html5/js/OffscreenDecodeWorker.js
@@ -190,7 +190,6 @@ class WindowDecoder {
 
     // Call update_still in callback
     setTimeout(() => this.update_still(), 0);
-
   }
 
   paint_box(coding, context, px, py, pw, ph) {
@@ -207,7 +206,7 @@ class WindowDecoder {
   }
 
   update_still() {
-    this.still.getContext('2d').drawImage(this.canvas, 0, 0);
+    this.still.getContext("2d").drawImage(this.canvas, 0, 0);
   }
 
   eos() {
@@ -219,7 +218,7 @@ class WindowDecoder {
 
   redraw() {
     // Redraw the last know state (saved on still)
-    this.canvas.getContext('2d').drawImage(this.still, 0, 0);
+    this.canvas.getContext("2d").drawImage(this.still, 0, 0);
   }
 
   update_geometry(w, h) {