rendering correct dimentions

src/render.js

@@ -6,8 +6,6 @@ export class Renderer {
   numStaves;
   sheetWindow;
   canvases = [];
-  canvasWidth;
-  canvasHeight;
   iconCache = [];
   iconScale = 0.25;
 
@@ -31,12 +29,6 @@ export class Renderer {
 
     for (let i = 1; i <= this.numStaves; i++) {
       const staveWrapper = document.createElement("div");
-      const canvas = document.createElement("canvas");
-      canvas.id = `canvas-${i}`;
-      canvas.className = "event-canvas";
-
-      const ctx = canvas.getContext("2d");
-      this.canvases.push({ canvas, ctx });
 
       staveWrapper.classList.add("stave-wrapper");
       staveWrapper.setAttribute("id", `stave-wrapper-${i}`);
@@ -45,23 +37,32 @@ export class Renderer {
       const staveObject = document.createElement("object");
       staveObject.type = "image/svg+xml";
       staveObject.data = "assets/svg/stave.svg";
-      staveObject.classList.add("stave-svg");
+      staveObject.class = "stave-svg";
 
-      staveWrapper.appendChild(canvas);
-      staveWrapper.appendChild(staveObject);
       this.sheetWindow.appendChild(staveWrapper);
 
-      // Set canvas size after layout is applied
+      const canvas = document.createElement("canvas");
+      canvas.id = `canvas-${i}`;
+      canvas.className = "event-canvas";
+
+      const ctx = canvas.getContext("2d");
+      this.canvases.push({ canvas, ctx });
+
+      staveWrapper.appendChild(staveObject);
+      staveWrapper.appendChild(canvas);
+
       requestAnimationFrame(() => {
-        const rect = canvas.getBoundingClientRect();
+        canvas.width = canvas.offsetWidth;
-        canvas.width = rect.width;
+        canvas.height = canvas.offsetHeight;
-        canvas.height = rect.height;
       });
     }
   }
 
   async placeIcon(instrument) {
-    if (this.currStaveNumber > this.numStaves) this.currStaveNumber = 1;
+    if (this.currStaveNumber > this.numStaves) {
+      this.currStaveNumber = 1;
+      this.iconCache.length = 0;
+    }
 
     const rect = this.timeIndicator.getBoundingClientRect();
     const sheetLeft = this.sheetWindow.getBoundingClientRect().left;
@@ -112,6 +113,3 @@ export class Renderer {
     if (reload) location.reload();
   }
 }
-
-// This will need to be worked on. There is no need for the loadImageFromSVG function here and the placeIcon function will need to be changed to reflect it.
-// image size and z-index isn't correct and the canvas will need to be enlarged to allow icons to overhang the staves.

styles.css

@@ -14,7 +14,7 @@ object {
   
 
 html {
-    overflow-x: hidden;
+    overflow-x: visible;
 }
 
 * {
@@ -32,7 +32,7 @@ html {
     align-items: center;
     opacity: 0;
     transition: opacity 2s ease;
-    overflow: hidden;
+    overflow: visible;
 
 }
 
@@ -75,16 +75,28 @@ html {
 }
 
 .event-canvas {
-    background: rgba(255, 0, 0, 0.2); /* light red overlay */
     position: absolute;
     top: 0;
-    left: 0;
+    left: -10px;
-    width: 100%;
+    width: 102%; /* Matches JS padding */
-    height:100%;
+    display: block;
     pointer-events: none;
+    overflow: visible;
     z-index: 9999;
 }
 
+.stave-wrapper {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 20vh;
+    background-color: rgb(24,24,24);
+    padding-top: 30px;
+    padding-bottom: 20px;
+    overflow: visible;
+    z-index: 100;
+}
+
 .logo {
     color: #fff;
     width: 20%;
@@ -129,6 +141,7 @@ html {
     margin: 0;
     background-color: rgb(24,24,24);
     margin-bottom: 100px;
+    overflow: visible;
 }
 
 .conductor-title{
@@ -155,28 +168,30 @@ html {
     z-index: 10;
 }
 
-.title{
-    top: 30px; 
-    width: 100%;
-    margin: 30px;
-    text-align: center;
-    color: white;  
-    background-color: rgb(24,24,24);
-    /* height: 20vh; */
-    font-family: Helvetica;
-    font-size: clamp(8px,1.1vw, 18px);
-
-}
-
 .about-title {
     top: 30px; 
     width: 50%;
 }
 
+.title{
+    top: 30px; 
+    width: 100%;
+    margin-top: 30px;
+    margin-bottom: 80px;
+    text-align: center;
+    color: white;  
+    background-color: rgb(24,24,24);
+    /* height: 20vh; */
+    font-family: Helvetica;
+    font-size: clamp(18px,1.1vw, 18px);
+
+}
+
 .title-title {
     font-family: Helvetica;
     color: #fff;
-    font-size: clamp(12px,1.5vw, 24px);
+    margin-top: 40px;
+    font-size: clamp(18px,1.5vw, 24px);
 }
 
 .production-credits {
@@ -187,14 +202,6 @@ html {
     content: '\00a0\00a0\00a0\00a0\00a0\00a0'; /* 6 non-breaking spaces */
 }
 
-.stave-wrapper {
-    position: relative;
-    background-color: rgb(24,24,24);
-    border: 1px solid rgb(99,99,99);
-    padding-top: 30px;
-    padding-bottom: 20px;
-    z-index: 100;
-}
 
 .stave-svg {
     position: relative;