Fix Hydra canvas order

index.html

@@ -31,6 +31,18 @@
       transition: background-color 0.05s ease-in-out;
     }
 
+    .hydracanvas {
+      position: fixed; /* ignore margins */
+      top: 0px;
+      left: 0px;
+      width: 100%; /* fill screen */
+      height: 100%;
+      background-size: cover;
+      overflow-y: hidden;
+      z-index: -5; /* place behind everything else */
+      display: block;
+    }
+
     .fullscreencanvas {
       position: fixed; /* ignore margins */
       top: 0px;
@@ -560,9 +572,9 @@
          <!-- Here comes the editor itself -->
           <div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">
             <canvas id="scope" class="fullscreencanvas"></canvas>
-            <canvas id="hydra-bg" class="fullscreencanvas"></canvas>
             <canvas id="feedback" class="fullscreencanvas"></canvas>
             <canvas id="drawings" class="fullscreencanvas"></canvas>
+            <canvas id="hydra-bg" class="hydracanvas"></canvas>
 					</div>
           <p id="error_line" class="hidden w-screen bg-background font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
         </div>

src/extensions/NumberExtensions.ts

@@ -4,6 +4,7 @@ import { Player } from "../classes/ZPlayer";
 import { SoundEvent } from "../classes/SoundEvent";
 import { SkipEvent } from "../classes/SkipEvent";
 
+
 declare global {
   interface Number {
     z(): Player;

src/main.ts

@@ -578,12 +578,13 @@ export class Editor {
     // @ts-ignore
     this.hydra_backend = new Hydra({
       canvas: this.interface.hydra_canvas as HTMLCanvasElement,
+      width: 1280,
+      height: 768,
       detectAudio: false,
       enableStreamCapture: false,
     });
     this.hydra = this.hydra_backend.synth;
     (globalThis as any).hydra = this.hydra;
-    this.hydra.setResolution(1024, 768);
   }
 
   private setCanvas(canvas: HTMLCanvasElement): void {