fixed filled mask

index.html

@@ -424,14 +424,42 @@
                 tempCanvas.height = this.outputCanvas.height;
                 tempCtx.drawImage(this.predictedMask, 0, 0, tempCanvas.width, tempCanvas.height);
 
-                if (this.currentView === 'filled') {
-                    tempCtx.globalCompositeOperation = 'source-in';
-                    tempCtx.fillStyle = '#FF00FF'; // Magenta
-                    tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
+                // if (this.currentView === 'filled') {
+                //     tempCtx.globalCompositeOperation = 'source-in';
+                //     tempCtx.fillStyle = '#FF00FF'; // Magenta
+                //     tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
+
+                //     this.outputCtx.globalAlpha = this.transparencySlider.value / 100;
+                //     this.outputCtx.drawImage(tempCanvas, 0, 0);
+                //     this.outputCtx.globalAlpha = 1.0;
 
+                if (this.currentView === 'filled') {
+                    // --- FIX START: Correct way to create a colored overlay ---
+                    const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
+                    const data = imageData.data;
+                    
+                    // Iterate through each pixel
+                    for (let i = 0; i < data.length; i += 4) {
+                        // data[i] is red, data[i+3] is alpha (transparency)
+                        // If the pixel in the mask is white (value > 128)
+                        if (data[i] > 128) {
+                            data[i] = 255;     // R - Magenta
+                            data[i + 1] = 0;   // G
+                            data[i + 2] = 255; // B
+                            data[i + 3] = 255; // Alpha - make it fully opaque
+                        } else {
+                            // If the pixel is black, make it completely transparent
+                            data[i + 3] = 0;
+                        }
+                    }
+                    tempCtx.putImageData(imageData, 0, 0);
+                    
+                    // Now draw this corrected overlay onto the main canvas with user-defined transparency
                     this.outputCtx.globalAlpha = this.transparencySlider.value / 100;
                     this.outputCtx.drawImage(tempCanvas, 0, 0);
-                    this.outputCtx.globalAlpha = 1.0;
+                    this.outputCtx.globalAlpha = 1.0; // Reset alpha
+                    // --- FIX END ---
+
 
                 } else if (this.currentView === 'outline') {
                     const src = cv.imread(tempCanvas);