From 2c9211355dab2426bf5b5e38c371c4079c58844d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 26 Jan 2026 05:00:42 +0000
Subject: [PATCH] Fix black screen issue - ensure canvas has dimensions before
 loading image

---
 frontend/src/components/ImageCanvas.jsx | 27 ++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ImageCanvas.jsx b/frontend/src/components/ImageCanvas.jsx
index ed39879..d8366bc 100644
--- a/frontend/src/components/ImageCanvas.jsx
+++ b/frontend/src/components/ImageCanvas.jsx
@@ -57,7 +57,10 @@ const ImageCanvas = ({
       }
     };
 
-    handleResize();
+    // Initial resize - use requestAnimationFrame to ensure DOM is ready
+    requestAnimationFrame(() => {
+      handleResize();
+    });
     window.addEventListener('resize', handleResize);
 
     // Mouse wheel zoom
@@ -97,16 +100,30 @@ const ImageCanvas = ({
 
     const canvas = fabricCanvasRef.current;
 
+    // Ensure canvas has dimensions before loading image
+    if (canvas.width === 0 || canvas.height === 0) {
+      const container = canvasRef.current?.parentElement;
+      if (container) {
+        canvas.setWidth(container.clientWidth || 800);
+        canvas.setHeight(container.clientHeight || 600);
+      }
+    }
+
     // Add cache buster to force reload
     const cacheBustedUrl = `${imageUrl}?t=${Date.now()}`;
 
     fabric.Image.fromURL(cacheBustedUrl, (img) => {
+      if (!img) {
+        console.error('Failed to load image from URL:', cacheBustedUrl);
+        return;
+      }
+
       canvas.clear();
 
       // Scale image to fit canvas with padding
       const padding = 40;
-      const availableWidth = canvas.width - padding;
-      const availableHeight = canvas.height - padding;
+      const availableWidth = (canvas.width || 800) - padding;
+      const availableHeight = (canvas.height || 600) - padding;
       const scale = Math.min(
         availableWidth / img.width,
         availableHeight / img.height
@@ -114,8 +131,8 @@ const ImageCanvas = ({
 
       img.scale(scale);
       img.set({
-        left: (canvas.width - img.width * scale) / 2,
-        top: (canvas.height - img.height * scale) / 2,
+        left: ((canvas.width || 800) - img.width * scale) / 2,
+        top: ((canvas.height || 600) - img.height * scale) / 2,
         selectable: false,
         evented: false,
       });