Properly position both layers centered

script.js

@@ -99,43 +99,62 @@ function formatTime(seconds) {
   const remainingSeconds = Math.floor(seconds % 60);
   return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
 }
-
-// Modify the drawVideos function to include debug text drawing
 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);
 
-  // Resize the canvas to accommodate both videos side by side
+  // Calculate scaled dimensions for each video
-  canvas.width = Math.max(videos[0].videoWidth, videos[1].videoWidth);
+  const scaledWidth1 = videos[0].videoWidth * scale1;
-  canvas.height = Math.max(videos[0].videoHeight, videos[1].videoHeight);
+  const scaledHeight1 = videos[0].videoHeight * scale1;
+  const scaledWidth2 = videos[1].videoWidth * scale2;
+  const scaledHeight2 = videos[1].videoHeight * scale2;
 
-  // Calculate positions for each video
+  // Calculate horizontal and vertical centering offsets for each video
-  const video1X = (canvas.width - videos[0].videoWidth) / 2;
+  const offsetX1 = (canvas.width - scaledWidth1) / 2;
-  const video1Y = (canvas.height - videos[0].videoHeight) / 2;
+  const offsetY1 = (canvas.height - scaledHeight1) / 2;
-  const video2X = (canvas.width - videos[1].videoWidth) / 2;
+  const offsetX2 = (canvas.width - scaledWidth2) / 2;
-  const video2Y = (canvas.height - videos[1].videoHeight) / 2;
+  const offsetY2 = (canvas.height - scaledHeight2) / 2;
 
   // Draw video 1
-  ctx.drawImage(videos[0], video1X, video1Y, videos[0].videoWidth, videos[0].videoHeight);
+  ctx.drawImage(videos[0], offsetX1, offsetY1, scaledWidth1, scaledHeight1);
+
+  // Draw bounding box for video 1 if debugMode is true
+  if (debugMode) {
+    ctx.strokeStyle = "red";
+    ctx.lineWidth = 2;
+    ctx.strokeRect(offsetX1-1, offsetY1-1, scaledWidth1+1, scaledHeight1+1);
+  }
 
   // Set composite operation to overlay
   ctx.globalCompositeOperation = "overlay";
 
   // Draw video 2
-  ctx.drawImage(videos[1], video2X, video2Y, videos[1].videoWidth, videos[1].videoHeight);
+  ctx.drawImage(videos[1], offsetX2, offsetY2, scaledWidth2, scaledHeight2);
+
+  // Draw bounding box for video 2 if debugMode is true
+  if (debugMode) {
+    ctx.strokeStyle = "blue";
+    ctx.lineWidth = 2;
+    ctx.strokeRect(offsetX2-1, offsetY2-1, scaledWidth2+1, scaledHeight2+1);
+  }
 
   // Reset composite operation
   ctx.globalCompositeOperation = "source-over";
 
-  // Draw debug text if debug mode is enabled
+  // If debugMode is true, draw debug text
   if (debugMode) {
     drawDebugText();
   }
+
   // Request next frame
   requestAnimationFrame(drawVideos);
 }
 
 
+
 function updateCanvasSize() {
   aspectRatio = Math.max(
     videos[0].videoWidth / videos[0].videoHeight,