Image Dreamy Haze Filter Applicator

function processImage(originalImg, blurPixels = 3, brightnessFactor = 1.15, contrastFactor = 0.85, hazeOverlayColor = "rgba(210, 210, 230, 0.2)", vignetteIntensity = 0.4) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure originalImg dimensions are available. This is crucial.
    // For an Image object, .width and .height are set after it's loaded.
    // naturalWidth/naturalHeight are the intrinsic dimensions.
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // If image dimensions are not valid (e.g., image not loaded), return an empty or minimal canvas.
    if (imgWidth === 0 || imgHeight === 0) {
        console.error("Image has zero dimensions. Ensure the image is fully loaded before processing.");
        // Create a small, identifiable canvas to indicate an issue.
        canvas.width = 100;
        canvas.height = 50;
        ctx.fillStyle = "red";
        ctx.fillRect(0,0,100,50);
        ctx.fillStyle = "white";
        ctx.fillText("Error: Image not loaded", 5, 25);
        return canvas; 
    }

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

    // Sanitize parameters to ensure they are within reasonable/expected ranges
    const finalBlurPixels = Math.max(0, blurPixels); // Blur cannot be negative
    const finalBrightnessFactor = Math.max(0, brightnessFactor); // Brightness factor (e.g., 1.0 is original, 1.5 is 150%)
    const finalContrastFactor = Math.max(0, contrastFactor);   // Contrast factor (e.g., 1.0 is original, 0.8 is 80%)
    const finalVignetteIntensity = Math.max(0, Math.min(1, vignetteIntensity)); // Intensity from 0 (none) to 1 (max)

    // 1. Apply base image filters (blur, brightness, contrast)
    // The ctx.filter property applies to subsequent drawing operations.
    // These filters are generally commutative in effect for this combination.
    ctx.filter = `blur(${finalBlurPixels}px) brightness(${finalBrightnessFactor}) contrast(${finalContrastFactor})`;
    
    // Draw the original image onto the canvas. It will be drawn with a_filter applied.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    
    // IMPORTANT: Reset the filter. Otherwise, any subsequent drawing operations 
    // (like the haze overlay or vignette) would also be blurred, brightened, and contrast-adjusted.
    ctx.filter = 'none'; 

    // 2. Apply haze color overlay
    // Check if hazeOverlayColor is a valid-looking string.
    if (hazeOverlayColor && typeof hazeOverlayColor === 'string' && hazeOverlayColor.trim() !== "") {
        // 'soft-light' blend mode often produces pleasing "haze" for light, desaturated colors.
        // Other useful modes could be 'overlay' (stronger) or 'screen' (for a brighter glow).
        ctx.globalCompositeOperation = 'soft-light'; 
        ctx.fillStyle = hazeOverlayColor; // e.g., "rgba(210, 210, 230, 0.2)"
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // Reset globalCompositeOperation to default to avoid affecting other drawing operations.
        ctx.globalCompositeOperation = 'source-over'; 
    }

    // 3. Apply vignette effect
    if (finalVignetteIntensity > 0) {
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        
        // The outer radius of the gradient should extend to the corners of the canvas
        // to ensure the vignette effect covers the entire image smoothly.
        const outerRadius = Math.sqrt(Math.pow(centerX, 2) + Math.pow(centerY, 2));
        
        // The inner radius determines the size of the central, unaffected (transparent) area.
        // r0 for createRadialGradient is the radius of the start circle of the gradient.
        // A factor like 0.2 to 0.4 of outerRadius often works well for the transparent center.
        const innerTransparentRadius = outerRadius * 0.25; // Adjust this factor (0.0 to 1.0)

        const gradient = ctx.createRadialGradient(
            centerX, centerY, innerTransparentRadius, // Start circle (x, y, radius)
            centerX, centerY, outerRadius             // End circle (x, y, radius)
        );
        
        // Vignette color is typically black. Its opacity is controlled by finalVignetteIntensity.
        // Color stop 0: Color at innerTransparentRadius (fully transparent black)
        gradient.addColorStop(0, 'rgba(0,0,0,0)'); 
        // Color stop 1: Color at outerRadius (semi-transparent black based on intensity)
        gradient.addColorStop(1, `rgba(0,0,0,${finalVignetteIntensity})`); 

        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    return canvas;
}