adding another canvas

index.html

@@ -27,7 +27,7 @@
     }
 
 
-    #hydra-bg {
+    .fullscreencanvas {
       position: fixed; /* ignore margins */
       top: 0px;
       left: 0px;
@@ -39,20 +39,6 @@
       display: block;
     }
 
-    #feedback {
-      position: fixed; /* ignore margins */
-      top: 0px;
-      left: 0px;
-      width: 100%; /* fill screen */
-      height: 100%;
-      background-size: cover;
-      overflow-y: hidden;
-      z-index: -1; /* place behind everything else */
-      display: block;
-    }
-
-
-
 		details br {
 			display: none;
 		}
@@ -465,8 +451,9 @@
          </ul>
          <!-- Here comes the editor itself -->
           <div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">
-            <canvas id="hydra-bg"></canvas>
-            <canvas id="feedback"></canvas>
+            <canvas id="hydra-bg" class="fullscreencanvas"></canvas>
+            <canvas id="scope" class="fullscreencanvas"></canvas>
+            <canvas id="feedback" class="fullscreencanvas"></canvas>
 					</div>
           <p id="error_line" class="hidden text-red-400 w-screen bg-neutral-900 font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
         </div>

src/DomElements.ts

@@ -48,6 +48,7 @@ export const singleElements = {
   error_line: "error_line",
   hydra_canvas: "hydra-bg",
   feedback: "feedback",
+  scope: "scope",
 };
 
 export const buttonGroups = {

src/WindowBehavior.ts

@@ -1,7 +1,6 @@
 import { type Editor } from "./main";
 
-const handleResize = (app: Editor) => {
-  const canvas = app.interface.feedback as HTMLCanvasElement | null; // add type guard
+const handleResize = (canvas: HTMLCanvasElement) => {
   if (!canvas) return;
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
@@ -22,7 +21,12 @@ export const installWindowBehaviors = (
   window: Window,
   preventMultipleTabs: boolean = false
 ) => {
-  window.addEventListener("resize", () => handleResize(app));
+  window.addEventListener("resize", () =>
+    handleResize(app.interface.scope as HTMLCanvasElement)
+  );
+  window.addEventListener("resize", () =>
+    handleResize(app.interface.feedback as HTMLCanvasElement)
+  );
   window.addEventListener("beforeunload", () => {
     // @ts-ignore
     event.preventDefault();

src/main.ts

@@ -62,7 +62,6 @@ export class Editor {
   osc: OscilloscopeConfig = {
     enabled: true,
     color: "#fdba74",
-    randomColor: true,
     thickness: 2,
     fftSize: 2048,
     orientation: "horizontal",
@@ -92,7 +91,8 @@ export class Editor {
     this.initializeElements();
     this.initializeButtonGroups();
     this.initializeHydra();
-    this.setCanvas();
+    this.setCanvas(this.interface.feedback as HTMLCanvasElement);
+    this.setCanvas(this.interface.scope as HTMLCanvasElement);
 
     // ================================================================================
     // Loading the universe from local storage
@@ -148,7 +148,7 @@ export class Editor {
     // ================================================================================
 
     installEditor(this);
-    runOscilloscope(this.interface.feedback as HTMLCanvasElement, this);
+    runOscilloscope(this.interface.scope as HTMLCanvasElement, this);
 
     // First evaluation of the init file
     tryEvaluate(this, this.universes[this.selected_universe.toString()].init);
@@ -456,9 +456,7 @@ export class Editor {
     this.hydra = this.hydra_backend.synth;
   }
 
-  private setCanvas(): void {
-    const canvas = this.interface.feedback as HTMLCanvasElement | null; // add type guard
-
+  private setCanvas(canvas: HTMLCanvasElement): void {
     if (!canvas) return;
     const ctx = canvas.getContext("2d");