fix weird stretching issue (related #12)

packages/client/src/lib/canvas.ts

@@ -70,6 +70,11 @@ export class Canvas extends EventEmitter<CanvasEvents> {
     this.canvas.width = config.canvas.size[0];
     this.canvas.height = config.canvas.size[1];
 
+    // we want the new one if possible
+    // (this might cause a timing issue though)
+    // if we don't clear the old one, if the canvas gets resized we get weird stretching
+    if (Object.keys(this.pixels).length > 0) Network.clearPrevious("canvas");
+
     Network.waitFor("canvas").then(([pixels]) => {
       console.log("loadConfig just received new canvas data");
       this.handleBatch(pixels);

packages/client/src/lib/network.ts

@@ -121,6 +121,22 @@ class Network extends EventEmitter<INetworkEvents> {
     return this.emit(event, ...args);
   };
 
+  /**
+   * Discard the existing state-like event, if it exists in cache
+   * @param ev
+   */
+  clearPrevious<Ev extends keyof INetworkEvents & (string | symbol)>(ev: Ev) {
+    delete this.sentEvents[ev];
+  }
+
+  /**
+   * Wait for event, either being already sent, or new one
+   *
+   * Used for state-like events
+   *
+   * @param ev
+   * @returns
+   */
   waitFor<Ev extends keyof INetworkEvents & (string | symbol)>(
     ev: Ev
   ): Promise<SentEventValue<Ev>> {