Update index.html

index.html

@@ -281,7 +281,6 @@
                 const ratio = Math.min(hRatio, vRatio);
                 canvas.width = img.width * ratio;
                 canvas.height = img.height * ratio;
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
                 ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
             }
             
@@ -369,14 +368,16 @@
                 this.currentView = view;
                 document.querySelectorAll('.output-tabs .tool-btn').forEach(b => b.classList.remove('active'));
                 document.getElementById(`view-${view}`).classList.add('active');
-                this.transparencyControl.style.display = (view === 'filled' || view === 'outline') ? 'block' : 'none';
+                this.transparencyControl.style.display = (view === 'filled') ? 'block' : 'none';
                 this.renderOutput();
             }
             
             renderOutput() {
-                if (!this.predictedMask) return;
+                if (!this.predictedMask) {
+                    this.outputCtx.clearRect(0, 0, this.outputCanvas.width, this.outputCanvas.height);
+                    return;
+                }
                 
-                // Always draw the original image on the output canvas first
                 this.outputCtx.clearRect(0,0, this.outputCanvas.width, this.outputCanvas.height);
                 this.drawImageScaled(this.outputCanvas, this.outputCtx, this.uploadedImage);
 
@@ -385,7 +386,6 @@
                     return;
                 }
                 
-                // Create a temporary canvas to work with the mask for filled/outline views
                 const tempCanvas = document.createElement('canvas');
                 const tempCtx = tempCanvas.getContext('2d');
                 tempCanvas.width = this.outputCanvas.width;
@@ -403,24 +403,23 @@
 
                 } else if (this.currentView === 'outline') {
                     const src = cv.imread(tempCanvas);
+                    cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);
+
+                    // Create a transparent mat to draw contours on
+                    let contourImg = cv.Mat.zeros(src.rows, src.cols, cv.CV_8UC4);
                     const contours = new cv.MatVector();
                     const hierarchy = new cv.Mat();
-                    cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);
                     cv.findContours(src, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE);
                     
-                    this.outputCtx.strokeStyle = 'white';
-                    this.outputCtx.lineWidth = 2;
+                    const color = new cv.Scalar(255, 255, 255, 255); // White color
                     for (let i = 0; i < contours.size(); ++i) {
-                        const contour = contours.get(i).data32S;
-                        this.outputCtx.beginPath();
-                        this.outputCtx.moveTo(contour[0], contour[1]);
-                        for (let j = 2; j < contour.length; j += 2) {
-                            this.outputCtx.lineTo(contour[j], contour[j+1]);
-                        }
-                        this.outputCtx.closePath();
-                        this.outputCtx.stroke();
+                        cv.drawContours(contourImg, contours, i, color, 2, cv.LINE_8, hierarchy, 0);
                     }
-                    src.delete(); contours.delete(); hierarchy.delete();
+                    
+                    // Draw the contours over the original image
+                    this.outputCtx.drawImage(contourImg, 0, 0, this.outputCanvas.width, this.outputCanvas.height);
+
+                    src.delete(); contours.delete(); hierarchy.delete(); contourImg.delete();
                 }
             }