From ed07fdb4b61a68146e2c8114cde735365c4a4c8b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 3 Jun 2026 15:28:41 +0000
Subject: [PATCH 1/2] Initial plan


From 96203dd7089486b01ac31887fb1936acba630846 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 3 Jun 2026 15:31:08 +0000
Subject: [PATCH 2/2] fix: reset canvas state when toggling preview modes

---
 .../components/StringArtCanvas/StringArtCanvas.tsx  | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/string-art-website/src/features/3RenderImage/components/StringArtCanvas/StringArtCanvas.tsx b/string-art-website/src/features/3RenderImage/components/StringArtCanvas/StringArtCanvas.tsx
index 87e0212..8790668 100644
--- a/string-art-website/src/features/3RenderImage/components/StringArtCanvas/StringArtCanvas.tsx
+++ b/string-art-website/src/features/3RenderImage/components/StringArtCanvas/StringArtCanvas.tsx
@@ -29,9 +29,15 @@ export const StringArtCanvas = forwardRef<HTMLCanvasElement, StringArtCanvasProp
     const ctx = canvas.getContext('2d');
     if (!ctx) return;
 
+    const resetCanvas = () => {
+      ctx.globalCompositeOperation = 'source-over';
+      ctx.clearRect(0, 0, width, height);
+      ctx.fillStyle = 'white';
+      ctx.fillRect(0, 0, width, height);
+    };
+
     // Always clear the canvas at the start of a render
-    ctx.fillStyle = 'white';
-    ctx.fillRect(0, 0, width, height);
+    resetCanvas();
 
     let isCancelled = false;
 
@@ -41,8 +47,7 @@ export const StringArtCanvas = forwardRef<HTMLCanvasElement, StringArtCanvasProp
         if (isCancelled) return;
 
         // Clear canvas again right before drawing to prevent race conditions
-        ctx.fillStyle = 'white';
-        ctx.fillRect(0, 0, width, height);
+        resetCanvas();
 
         const scale = Math.min(width / img.width, height / img.height);
         const scaledWidth = img.width * scale;