Image Haze Filter Application

function processImage(originalImg, 
                      hazeEffectColor = "rgb(200, 220, 255)", 
                      hazeStrength = 0.4,
                      desaturation = "0.0" // String "0.0" to "1.0", where "1.0" is full grayscale
                     ) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    // Check if the image has valid dimensions (i.e., it's loaded and not a zero-size image)
    if (imgWidth === 0 || imgHeight === 0) {
        console.error("Image not loaded or has zero dimensions. Returning empty canvas.");
        // Set canvas to 0x0 to indicate failure or an issue with the input image
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // --- 1. Apply Desaturation (if specified) ---
    // Validate and parse desaturation parameter
    let desatValue = parseFloat(desaturation);
    if (isNaN(desatValue)) {
        console.warn(`Invalid desaturation value "${desaturation}", using 0.0 (no desaturation).`);
        desatValue = 0.0;
    } else {
        // Clamp desatValue between 0 (no desaturation) and 1 (full desaturation/grayscale)
        desatValue = Math.max(0, Math.min(1, desatValue));
    }

    if (desatValue > 0) {
        // The ctx.filter 'saturate()' property takes a percentage.
        // 100% is normal saturation, 0% is grayscale.
        // So, saturation = (1 - desatValue) * 100%
        const saturationPercentage = (1 - desatValue) * 100;
        ctx.filter = `saturate(${saturationPercentage}%)`;
        
        // Draw the image, applying the filter
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
        
        // Reset the filter to 'none' so it doesn't affect subsequent drawing operations (like the haze overlay)
        ctx.filter = 'none';
    } else {
        // If no desaturation, draw the original image as is
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    }

    // --- 2. Apply Haze Overlay ---
    // Validate and parse hazeStrength parameter
    let strength = parseFloat(hazeStrength);
    if (isNaN(strength)) {
        console.warn(`Invalid hazeStrength value "${hazeStrength}", using 0.0 (no haze).`);
        strength = 0.0;
    } else {
        // Clamp strength between 0 (no haze) and 1 (full opacity haze color)
        strength = Math.max(0, Math.min(1, strength));
    }
    
    // Only apply haze if strength is greater than 0
    if (strength > 0) {
        // Set the fill style to the haze color. Canvas's fillStyle can parse various color string formats.
        ctx.fillStyle = hazeEffectColor;
        
        // Set globalAlpha for the transparency of the haze.
        // This will be multiplied by any alpha component already in hazeEffectColor.
        ctx.globalAlpha = strength;
        
        // Draw the haze rectangle covering the_entire image
        ctx.fillRect(0, 0, imgWidth, imgHeight);
        
        // Reset globalAlpha to its default (1.0) for good practice,
        // preventing it from affecting other drawing operations on this context if it were reused.
        ctx.globalAlpha = 1.0;
    }

    return canvas;
}