Try to set units backward.

src/KonvaApp/Engine.ts

@@ -81,7 +81,29 @@ export class Engine {
       "https://storage.googleapis.com/vocodes-public/media/r/q/p/r/e/rqpret6mkh18dqwjqwghhdqf15x720s1/storyteller_rqpret6mkh18dqwjqwghhdqf15x720s1.mp4",
     );
 
-    this.renderEngine.addNodes(videoNode);
+    const node2 = new VideoNode(
+      "",
+      this.offScreenCanvas,
+      this.videoLayer,
+      700,
+      700,
+      "https://storage.googleapis.com/vocodes-public/media/r/q/p/r/e/rqpret6mkh18dqwjqwghhdqf15x720s1/storyteller_rqpret6mkh18dqwjqwghhdqf15x720s1.mp4",
+    );
+
+    const frame = new Konva.Rect({
+      x: 50,
+      y: 50,
+      width: 720,
+      height: 1080,
+      fill: "white",
+      stroke: "black",
+      strokeWidth: 1,
+      draggable: true,
+    });
+    frame.moveToTop();
+    this.videoLayer.add(frame);
+
+    //this.renderEngine.addNodes(videoNode);
 
     // Call this when
     //await this.renderEngine.startProcessing();

src/KonvaApp/RenderEngine.ts

@@ -1,13 +1,10 @@
-import { faL } from "@fortawesome/pro-thin-svg-icons";
 import { VideoNode } from "./Nodes/VideoNode";
-
 export class RenderEngine {
   private videoNodes: VideoNode[];
   private offScreenCanvas: OffscreenCanvas;
   private context: OffscreenCanvasRenderingContext2D | null;
   private isProcessing: boolean;
 
-  private frameLength: number;
   private frames: ImageBitmap[];
   constructor(offScreenCanvas: OffscreenCanvas) {
     this.videoNodes = [];
@@ -110,11 +107,6 @@ export class RenderEngine {
             );
             console.log("Pushing");
             this.frames.push(this.offScreenCanvas.transferToImageBitmap());
-            //   this.offScreenCanvas.convertToBlob().then((blob) => {
-            //     // Save or process the blob as needed
-            //     console.log("Frame saved as blob:", blob);
-            //     this.blobToFile(blob);
-            //   });
           }
         } // end of if
       } // end of for.