Removing one more canvas

index.html

@@ -32,26 +32,22 @@
     }
 
     .hydracanvas {
-      position: fixed; /* ignore margins */
+      position: fixed;
-      top: 0px;
+      top: 0px; left: 0px;
-      left: 0px;
+      width: 100%; height: 100%;
-      width: 100%; /* fill screen */
-      height: 100%;
       background-size: cover;
       overflow-y: hidden;
-      z-index: -5; /* place behind everything else */
+      z-index: -5;
       display: block;
     }
 
     .fullscreencanvas {
-      position: fixed; /* ignore margins */
+      position: fixed;
-      top: 0px;
+      top: 0px; left: 0px;
-      left: 0px;
+      width: 100%; height: 100%;
-      width: 100%; /* fill screen */
-      height: 100%;
       background-size: cover;
       overflow-y: hidden;
-      z-index: -1; /* place behind everything else */
+      z-index: -1;
       display: block;
     }
 
@@ -576,7 +572,6 @@
           <div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">
             <canvas id="scope" 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>

src/API/Canvas.ts

@@ -3,7 +3,7 @@ import { ShapeObject, createConicGradient, createLinearGradient, createRadialGra
 import { Editor } from "../main";
 
 export const w = (app: Editor) => (): number => {
-  const canvas: HTMLCanvasElement = app.interface.drawings as HTMLCanvasElement;
+  const canvas: HTMLCanvasElement = app.interface.feedback as HTMLCanvasElement;
   return canvas.clientWidth;
 };
 
@@ -12,7 +12,7 @@ export const pulseLocation = (app: Editor) => (): number => {
 };
 
 export const clear = (app: Editor) => (): boolean => {
-  const canvas: HTMLCanvasElement = app.interface.drawings as HTMLCanvasElement;
+  const canvas: HTMLCanvasElement = app.interface.feedback as HTMLCanvasElement;
   const ctx = canvas.getContext("2d")!;
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   return true;
@@ -20,7 +20,7 @@ export const clear = (app: Editor) => (): boolean => {
 
 
 export const h = (app: Editor) => (): number => {
-  const canvas: HTMLCanvasElement = app.interface.drawings as HTMLCanvasElement;
+  const canvas: HTMLCanvasElement = app.interface.feedback as HTMLCanvasElement;
   return canvas.clientHeight;
 };
 
@@ -33,28 +33,28 @@ export const wc = (app: Editor) => (): number => {
 };
 
 export const background = (app: Editor) => (color: string | number, ...gb: number[]): boolean => {
-  drawBackground(app.interface.drawings as HTMLCanvasElement, color, ...gb);
+  drawBackground(app.interface.feedback as HTMLCanvasElement, color, ...gb);
   return true;
 };
 export const bg = background;
 
 export const linearGradient = (app: Editor) => (x1: number, y1: number, x2: number, y2: number, ...stops: (number | string)[]): CanvasGradient => {
-  return createLinearGradient(app.interface.drawings as HTMLCanvasElement, x1, y1, x2, y2, ...stops);
+  return createLinearGradient(app.interface.feedback as HTMLCanvasElement, x1, y1, x2, y2, ...stops);
 };
 
 export const radialGradient = (app: Editor) => (x1: number, y1: number, r1: number, x2: number, y2: number, r2: number, ...stops: (number | string)[]) => {
-  return createRadialGradient(app.interface.drawings as HTMLCanvasElement, x1, y1, r1, x2, y2, r2, ...stops);
+  return createRadialGradient(app.interface.feedback as HTMLCanvasElement, x1, y1, r1, x2, y2, r2, ...stops);
 };
 
 export const conicGradient = (app: Editor) => (x: number, y: number, angle: number, ...stops: (number | string)[]) => {
-  return createConicGradient(app.interface.drawings as HTMLCanvasElement, x, y, angle, ...stops);
+  return createConicGradient(app.interface.feedback as HTMLCanvasElement, x, y, angle, ...stops);
 };
 
 export const draw = (app: Editor) => (func: Function): boolean => {
   if (typeof func === "string") {
-    drawText(app.interface.drawings as HTMLCanvasElement, func, 24, 0, "Arial", wc(app)(), hc(app)(), "white", "none");
+    drawText(app.interface.feedback as HTMLCanvasElement, func, 24, 0, "Arial", wc(app)(), hc(app)(), "white", "none");
   } else {
-    const canvas: HTMLCanvasElement = app.interface.drawings as HTMLCanvasElement;
+    const canvas: HTMLCanvasElement = app.interface.feedback as HTMLCanvasElement;
     const ctx = canvas.getContext("2d")!;
     func(ctx);
   }
@@ -79,7 +79,7 @@ export const balloid = (app: Editor) => (
     radius = curves.radius || hc(app)() / 2;
     curves = curves.curves || 6;
   }
-  drawBalloid(app.interface.drawings as HTMLCanvasElement, curves, radius, curve, fillStyle, secondary, x, y);
+  drawBalloid(app.interface.feedback as HTMLCanvasElement, curves, radius, curve, fillStyle, secondary, x, y);
   return true;
 };
 
@@ -97,7 +97,7 @@ export const equilateral = (app: Editor) => (
     rotation = radius.rotation || 0;
     radius = radius.radius || hc(app)() / 3;
   }
-  drawEquilateral(app.interface.drawings as HTMLCanvasElement, radius, fillStyle, rotation, x, y);
+  drawEquilateral(app.interface.feedback as HTMLCanvasElement, radius, fillStyle, rotation, x, y);
   return true;
 };
 
@@ -117,7 +117,7 @@ export const triangular = (app: Editor) => (
     height = width.height || hc(app)() / 3;
     width = width.width || hc(app)() / 3;
   }
-  drawTriangular(app.interface.drawings as HTMLCanvasElement, width, height, fillStyle, rotation, x, y);
+  drawTriangular(app.interface.feedback as HTMLCanvasElement, width, height, fillStyle, rotation, x, y);
   return true;
 };
 export const pointy = triangular;
@@ -134,7 +134,7 @@ export const ball = (app: Editor) => (
     y = radius.y || hc(app)();
     radius = radius.radius || hc(app)() / 3;
   }
-  drawBall(app.interface.drawings as HTMLCanvasElement, radius, fillStyle, x, y);
+  drawBall(app.interface.feedback as HTMLCanvasElement, radius, fillStyle, x, y);
   return true;
 };
 export const circle = ball;
@@ -163,7 +163,7 @@ export const donut = (app: Editor) => (
     stroke = slices.stroke || "black";
     slices = slices.slices || 3;
   }
-  drawDonut(app.interface.drawings as HTMLCanvasElement, slices, eaten, radius, hole, fillStyle, secondary, stroke, rotation, x, y);
+  drawDonut(app.interface.feedback as HTMLCanvasElement, slices, eaten, radius, hole, fillStyle, secondary, stroke, rotation, x, y);
   return true;
 };
 
@@ -189,7 +189,7 @@ export const pie = (app: Editor) => (
     eaten = slices.eaten || 0;
     slices = slices.slices || 3;
   }
-  drawPie(app.interface.drawings as HTMLCanvasElement, slices, eaten, radius, fillStyle, secondary, stroke, rotation, x, y);
+  drawPie(app.interface.feedback as HTMLCanvasElement, slices, eaten, radius, fillStyle, secondary, stroke, rotation, x, y);
   return true;
 };
 
@@ -211,7 +211,7 @@ export const star = (app: Editor) => (
     outerRadius = points.outerRadius || radius / 100;
     points = points.points || 5;
   }
-  drawStar(app.interface.drawings as HTMLCanvasElement, points, radius, fillStyle, rotation, outerRadius, x, y);
+  drawStar(app.interface.feedback as HTMLCanvasElement, points, radius, fillStyle, rotation, outerRadius, x, y);
   return true;
 };
 
@@ -233,7 +233,7 @@ export const stroke = (app: Editor) => (
     rotation = width.rotation || 0;
     width = width.width || 1;
   }
-  drawStroke(app.interface.drawings as HTMLCanvasElement, width, strokeStyle, rotation, x1, y1, x2, y2);
+  drawStroke(app.interface.feedback as HTMLCanvasElement, width, strokeStyle, rotation, x1, y1, x2, y2);
   return true;
 };
 
@@ -253,7 +253,7 @@ export const box = (app: Editor) => (
     height = width.height || wc(app)() / 4;
     width = width.width || wc(app)() / 4;
   }
-  drawBox(app.interface.drawings as HTMLCanvasElement, width, height, fillStyle, rotation, x, y);
+  drawBox(app.interface.feedback as HTMLCanvasElement, width, height, fillStyle, rotation, x, y);
   return true;
 };
 
@@ -275,7 +275,7 @@ export const smiley = (app: Editor) => (
     radius = happiness.radius || hc(app)() / 3;
     happiness = happiness.happiness || 0;
   }
-  drawSmiley(app.interface.drawings as HTMLCanvasElement, happiness, radius, eyeSize, fillStyle, rotation, x, y);
+  drawSmiley(app.interface.feedback as HTMLCanvasElement, happiness, radius, eyeSize, fillStyle, rotation, x, y);
   return true;
 };
 
@@ -299,7 +299,7 @@ export const text = (app: Editor) => (
     filter = text.filter || "none";
     text = text.text || "";
   }
-  drawText(app.interface.drawings as HTMLCanvasElement, text, fontSize, rotation, font, x, y, fillStyle, filter);
+  drawText(app.interface.feedback as HTMLCanvasElement, text, fontSize, rotation, font, x, y, fillStyle, filter);
   return true;
 };
 
@@ -322,7 +322,7 @@ export const image = (app: Editor) => (
     filter = url.filter || "none";
     url = url.url || "";
   }
-  drawImage(app.interface.drawings as HTMLCanvasElement, url, width, height, rotation, x, y, filter);
+  drawImage(app.interface.feedback as HTMLCanvasElement, url, width, height, rotation, x, y, filter);
   return true;
 };
 

src/DOM/DomElements.ts

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

src/DOM/Visuals/Blinkers.ts

@@ -40,7 +40,7 @@ export const blinkScript = (
   const blinkDuration =
     (app.clock.bpm / 60 / app.clock.time_signature[1]) * 200;
   // @ts-ignore
-  const ctx = app.interface.feedback.getContext("2d"); // Assuming a canvas context
+  const ctx = app.interface.feedback.getContext("2d");
 
   /**
    * Draws a circle at a given shift.

src/DOM/WindowBehavior.ts

@@ -45,7 +45,7 @@ export const installWindowBehaviors = (
     handleResize(app.interface.feedback as HTMLCanvasElement),
   );
   window.addEventListener("resize", () =>
-    handleResize(app.interface.drawings as HTMLCanvasElement),
+    handleResize(app.interface.feedback as HTMLCanvasElement),
   );
   window.addEventListener("beforeunload", (event) => {
     event.preventDefault();

src/main.ts

@@ -104,6 +104,7 @@ export class Editor {
   public hydra: any;
 
   constructor() {
+
     /**
      * This is the entry point of the application. The Editor instance is created when the page is loaded.
      * It is responsible for:
@@ -124,12 +125,7 @@ export class Editor {
     this.initializeElements();
     this.initializeButtonGroups();
     this.setCanvas(this.interface.feedback as HTMLCanvasElement);
-    this.setCanvas(this.interface.drawings as HTMLCanvasElement);
+    this.loadHydraSynthAsync();
-    try {
-      this.loadHydraSynthAsync();
-    } catch (error) {
-      console.log("Couldn't start Hydra: ", error);
-    }
 
     // ================================================================================
     // Loading the universe from local storage
@@ -137,7 +133,6 @@ export class Editor {
 
     this.universes = {
       ...this.settings.universes,
-      //...template_universes,
     };
     initializeSelectedUniverse(this);
 
@@ -541,26 +536,40 @@ export class Editor {
     }
   }
 
+
   private loadHydraSynthAsync(): void {
-    /**
+    const timeoutDuration = 1000;
-     * Loads the Hydra Synth asynchronously by creating a script element
-     * and appending it to the document head.  * Once the script is
-     * loaded successfully, it initializes the Hydra Synth. If there
-     * is an error loading the script, it logs an error message.
-     */
     var script = document.createElement("script");
     script.src = "https://unpkg.com/hydra-synth";
     script.async = true;
+
+    let timeoutHandle = setTimeout(() => {
+      script.onerror = null;
+      script.onload = null;
+      document.head.removeChild(script);
+      console.error("Hydra loading timed out");
+      this.handleLoadingError();
+    }, timeoutDuration);
+
     script.onload = () => {
+      clearTimeout(timeoutHandle);
       console.log("Hydra loaded successfully");
       this.initializeHydra();
-    };
+    }
-    script.onerror = function() {
+
+    script.onerror = () => {
+      clearTimeout(timeoutHandle);
       console.error("Error loading Hydra script");
-    };
+      this.handleLoadingError();
+    }
+
     document.head.appendChild(script);
   }
 
+  private handleLoadingError(): void {
+    console.error("Handling error after failed script load.");
+  }
+
   private initializeHydra(): void {
     /**
      * Initializes the Hydra backend and sets up the Hydra synth.
@@ -582,10 +591,8 @@ export class Editor {
      * Sets the canvas element and configures its size and context.
      * @param canvas - The HTMLCanvasElement to set.
      */
-    if (!canvas) return;
     const ctx = canvas.getContext("2d");
     const dpr = window.devicePixelRatio || 1;
-    // Assuming the canvas takes up the whole window
     canvas.width = window.innerWidth * dpr;
     canvas.height = window.innerHeight * dpr;
     if (ctx) {