1 files changed, 50 insertions, 11 deletions

diff --git a/js/leibovitz/leibovitz.js b/js/leibovitz/leibovitz.js
index d9d90eb..cdf9ca4 100644
--- a/js/leibovitz/leibovitz.js
+++ b/js/leibovitz/leibovitz.js
@@ -62,11 +62,39 @@ function updateCanvasSize() {
 }
 
 // Update canvas size when window is resized
-window.addEventListener('resize', updateCanvasSize);
+window.addEventListener('resize', () => {
+    if (cameraOn || isEditMode) {
+        updateCanvasSize();
+        if (isEditMode && originalImage) {
+            applyEffects();
+        }
+    }
+});
 
 // Initialize canvas size
 updateCanvasSize();
 
+// Function to completely clear the canvas
+function clearCanvas() {
+    // Get container dimensions
+    const container = document.querySelector('.preview-container');
+    const containerWidth = container.clientWidth;
+    const containerHeight = container.clientHeight;
+    
+    // Set canvas dimensions to match container
+    canvas.width = containerWidth;
+    canvas.height = containerHeight;
+    
+    // Clear the entire canvas context
+    ctx.clearRect(0, 0, containerWidth, containerHeight);
+    
+    // Reset any transformations or other context properties
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    
+    // Hide the canvas
+    canvas.style.display = 'none';
+}
+
 function startCamera() {
     // If we're in edit mode, show confirmation dialog
     if (isEditMode) {
@@ -77,8 +105,7 @@ function startCamera() {
         // Clear edit mode state
         isEditMode = false;
         originalImage = null;
-        canvas.style.display = 'none';
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        clearCanvas();
     }
 
     navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: 'environment' } } })
@@ -140,7 +167,7 @@ function stopCamera() {
     if (stream) {
         stream.getTracks().forEach(track => track.stop());
         video.pause();
-        canvas.style.display = 'none'; // hide the canvas
+        clearCanvas();
         captureButton.disabled = true;
         captureButton.active = false;
         focusSlider.disabled = true;
@@ -156,6 +183,9 @@ function loadImage(file) {
     reader.onload = function(e) {
         const img = new Image();
         img.onload = function() {
+            // Clear any existing content first
+            clearCanvas();
+            
             // Calculate dimensions to maintain aspect ratio
             const container = document.querySelector('.preview-container');
             const containerWidth = container.clientWidth;
@@ -164,19 +194,25 @@ function loadImage(file) {
             const imgAspect = img.width / img.height;
             const containerAspect = containerWidth / containerHeight;
             
+            let canvasWidth, canvasHeight;
+            
             if (containerAspect > imgAspect) {
-                canvas.height = containerHeight;
-                canvas.width = containerHeight * imgAspect;
+                canvasHeight = containerHeight;
+                canvasWidth = containerHeight * imgAspect;
             } else {
-                canvas.width = containerWidth;
-                canvas.height = containerWidth / imgAspect;
+                canvasWidth = containerWidth;
+                canvasHeight = containerWidth / imgAspect;
             }
             
+            // Set canvas dimensions
+            canvas.width = canvasWidth;
+            canvas.height = canvasHeight;
+            
             // Store the original image
             originalImage = img;
             
-            // Draw the image
-            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+            // Draw the new image
+            ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
             canvas.style.display = 'block';
             captureButton.disabled = false;
             captureButton.active = true;
@@ -196,7 +232,7 @@ function loadImage(file) {
 }
 
 function applyEffects() {
-    // Clear the canvas
+    // Clear the canvas first
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     
     // Draw the original image
@@ -211,6 +247,9 @@ function applyEffects() {
 }
 
 function drawVideoProportional() {
+    // Clear the canvas first
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    
     const videoAspectRatio = video.videoWidth / video.videoHeight;
     const canvasAspectRatio = canvas.width / canvas.height;