properly position debug text and change drawVideos to loop instead of boolish

script.js

@@ -40,36 +40,37 @@ function handleVideoEnded(event) {
   selectRandomVideo(video);
 }
 
+
 function drawVideos() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-  // Calculate scaling factors for each video to fit the canvas
-  const scale1 = Math.max(canvas.width / videos[0].videoWidth, canvas.height / videos[0].videoHeight);
-  const scale2 = Math.max(canvas.width / videos[1].videoWidth, canvas.height / videos[1].videoHeight);
-
-  // Calculate scaled dimensions for each video
-  const scaledWidth1 = videos[0].videoWidth * scale1;
-  const scaledHeight1 = videos[0].videoHeight * scale1;
-  const scaledWidth2 = videos[1].videoWidth * scale2;
-  const scaledHeight2 = videos[1].videoHeight * scale2;
-
-  // Calculate horizontal and vertical centering offsets for each video
-  const offsetX1 = (canvas.width - scaledWidth1) / 2;
-  const offsetY1 = (canvas.height - scaledHeight1) / 2;
-  const offsetX2 = (canvas.width - scaledWidth2) / 2;
-  const offsetY2 = (canvas.height - scaledHeight2) / 2;
+  let blendModes = ["source-over","overlay","screen"]
 
-  // Draw video 1
-  ctx.drawImage(videos[0], offsetX1, offsetY1, scaledWidth1, scaledHeight1);
-
-  // Set composite operation to overlay
-  ctx.globalCompositeOperation = "overlay";
+  videos.forEach((video,i) => {
+    // Calculate scaling factor to fit the canvas
+    const scale = Math.max(canvas.width/video.videoWidth, canvas.height/video.videoHeight)
+
+    // Calculate scaled dimensions
+    const scaledWidth = video.videoWidth * scale
+    const scaledHeight = video.videoHeight * scale
+
+    // Calculate horizontal and vertical centering offset
+    const offsetX = (canvas.width-scaledWidth)/2
+    const offsetY = (canvas.height-scaledHeight)/2
+
+    // Use default blend mode for first video (i=0), repeat the rest of blendModes
+    if (i === 0) {
+      ctx.globalCompositeOperation = blendModes[0];
+    } else {
+      ctx.globalCompositeOperation = blendModes[(i - 1) % (blendModes.length - 1) + 1];
+    }
 
-  // Draw video 2
-  ctx.drawImage(videos[1], offsetX2, offsetY2, scaledWidth2, scaledHeight2);
+    // Draw the current video frame onto the canvas
+    ctx.drawImage(video, offsetX, offsetY, scaledWidth, scaledHeight)
 
-  // Reset composite operation
-  ctx.globalCompositeOperation = "source-over";
+    // Reset composite operation
+    ctx.globalCompositeOperation = "source-over";
+  })
 
   // If debugMode is true, draw debug text
   if (debugMode) {
@@ -80,46 +81,40 @@ function drawVideos() {
   requestAnimationFrame(drawVideos);
 }
 
-// Function to draw debug text on the canvas
 function drawDebugText() {
   // Set font style and color
   ctx.font = "16px Arial";
   ctx.fillStyle = "white";
 
-  let colors = ["blue","red","yellow","green","white","pink","purple"]
-  let corners = [[0,0],[1,1],[0,1],[1,0]];
-  let padding = 20;
+  let corners = [[0, 0], [1, 1], [0, 1], [1, 0]]; // Top-left, bottom-right, top-right, bottom-left
+  let padding = 20
 
-  videos.forEach((video,i) => {
-    //console.log("Drawing debug text for video",i,video);
+  videos.forEach((video, i) => {
+    // Get the corner coordinates for the current video
+    const corner = corners[i];
 
-    let corner = corners[i];
-    let positionX = corner[0] === 0 ? padding : canvas.width - padding;
-    let positionY = corner[1] === 0 ? padding : canvas.height - padding;
+    // Calculate the position of the text in the corner
+    let positionX = corner[0] ? canvas.width : padding
+    let positionY = corner[1] ? canvas.height : padding
 
-    // Adjust position for bottom right corner to stay within canvas bounds
-    if (corner[0] === 1 && positionY + 40 > canvas.height) {
-      positionY = canvas.height - 40;
-    }
+    // Adjust position to ensure text is within the canvas bounds
+    //positionX = Math.max(0, Math.min(positionX, canvas.width - ctx.measureText(getFilename(video.src)).width));
+    positionY = Math.max(0, Math.min(positionY, canvas.height - padding*3));
 
     // Set text alignment based on corner
-    ctx.textAlign = corner[0] === 0 ? "left" : "right";
-    ctx.textBaseline = corner[1] === 0 ? "top" : "bottom";
+    ctx.textAlign = corner[0] ? "right" : "left"
+    ctx.textBaseline = corner[1]  ? "bottom" : "top"
 
     // Draw debug text for the video
     ctx.fillText(getFilename(video.src), positionX, positionY);
-    ctx.fillText("Dimensions: " + video.videoWidth + "x" + video.videoHeight, positionX, positionY + 20);
+    ctx.fillText(`Dimensions: ${video.videoWidth}x${video.videoHeight} ()`, positionX, positionY + 20);
     ctx.fillText(formatTime(video.currentTime) + "/" + formatTime(video.duration), positionX, positionY + 40);
     // Add more debug information as needed
-
-    // Draw wireframes
-    ctx.strokeStyle = colors[i % colors.length];
-    ctx.lineWidth = 2;
-    console.log(ctx,video)
-    //ctx.strokeRect(offsetX2-1, offsetY2-1, scaledWidth2+1, scaledHeight2+1);
   });
 }
 
+
+
 // Function to extract filename from full path
 function getFilename(src) {
   const parts = src.split('/');