Image Large Format Filter Effect Application

function processImage(originalImg, blurAmountPx = 5, focusAreaScale = 0.4, vignetteIntensity = 0.5, vignetteSoftness = 0.5, desaturation = 0.2, contrastBoost = 0.1, grainIntensity = 0.05) {
    const w = originalImg.width;
    const h = originalImg.height;

    if (w === 0 || h === 0) {
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = Math.max(0, w); // Should be 0 if w is 0
        emptyCanvas.height = Math.max(0, h); // Should be 0 if h is 0
        // console.warn("Image Large Format Filter: Input image has zero dimension.");
        return emptyCanvas;
    }

    const outputCanvas = document.createElement('canvas');
    outputCanvas.width = w;
    outputCanvas.height = h;
    const outputCtx = outputCanvas.getContext('2d');

    // Use a temporary canvas for intermediate operations, especially for bokeh effect
    const tempProcessingCanvas = document.createElement('canvas');
    tempProcessingCanvas.width = w;
    tempProcessingCanvas.height = h;
    const tempCtx = tempProcessingCanvas.getContext('2d');

    const centerX = w / 2;
    const centerY = h / 2;

    // Sanitize and clamp parameters using their passed values or defaults
    const BOKEH_blurAmountPx = Math.max(0, Number(blurAmountPx));
    const BOKEH_focusAreaScale = Math.max(0.01, Math.min(0.99, Number(focusAreaScale)));
    
    const VIGNETTE_intensity = Math.max(0, Math.min(1, Number(vignetteIntensity)));
    // vignetteSoftness determines how large the central transparent area of the vignette is.
    // 0.01 = small transparent area (vignette starts near center), 0.99 = large transparent area (vignette is only at extreme edges)
    const VIGNETTE_softness_factor = Math.max(0.01, Math.min(0.99, Number(vignetteSoftness))); 
    
    const COLOR_desaturation = Math.max(0, Math.min(1, Number(desaturation)));
    const COLOR_contrastBoost = Math.max(0, Math.min(1, Number(contrastBoost))); // kontrast 1.0 to 2.0
    
    const GRAIN_intensity = Math.max(0, Math.min(1, Number(grainIntensity)));

    // --- 1. Bokeh effect on tempProcessingCanvas ---
    // This canvas will hold the image with blurred peripheries and sharp center.
    if (BOKEH_blurAmountPx > 0) {
        tempCtx.filter = `blur(${BOKEH_blurAmountPx}px)`;
        tempCtx.drawImage(originalImg, 0, 0, w, h);
        tempCtx.filter = 'none'; // Reset filter for sharp drawing
    } else {
        // No blur, so the temp canvas just gets the original image
        tempCtx.drawImage(originalImg, 0, 0, w, h);
    }

    // If blur was applied, composite the sharp central part
    if (BOKEH_blurAmountPx > 0) {
        tempCtx.save();
        // Define the elliptical sharp area
        const ellipseRx = (w * BOKEH_focusAreaScale) / 2;
        const ellipseRy = (h * BOKEH_focusAreaScale) / 2;
        
        tempCtx.beginPath();
        tempCtx.ellipse(centerX, centerY, ellipseRx, ellipseRy, 0, 0, 2 * Math.PI);
        tempCtx.clip(); // Clip to this ellipse
        
        // Draw the original (sharp) image; only the part within the ellipse will be visible
        tempCtx.drawImage(originalImg, 0, 0, w, h);
        tempCtx.restore(); // Remove clipping path
    }

    // --- 2. Color Adjustments (draw tempProcessingCanvas to outputCanvas) ---
    // Apply desaturation and contrast to the bokeh-processed image
    const filters = [];
    if (COLOR_desaturation > 0) { // 0 means 100% saturation (no change)
        filters.push(`saturate(${1 - COLOR_desaturation})`);
    }
    if (COLOR_contrastBoost > 0) { // 0 means 100% contrast (no change)
        filters.push(`contrast(${1 + COLOR_contrastBoost})`);
    }

    if (filters.length > 0) {
        outputCtx.filter = filters.join(' ');
    }
    outputCtx.drawImage(tempProcessingCanvas, 0, 0, w, h); // Draw the (possibly) bokeh'd image
    if (filters.length > 0) {
        outputCtx.filter = 'none'; // Reset filter on the output canvas
    }

    // --- 3. Vignetting on outputCanvas ---
    // Apply vignette over the color-adjusted image
    if (VIGNETTE_intensity > 0) {
        // Outer radius of the gradient extends to the corners of the image
        const vigOuterRadius = Math.sqrt(centerX * centerX + centerY * centerY);
        // Inner radius (where transparency ends and darkening begins) is scaled by softness_factor
        // A higher softness_factor means a larger transparent central area.
        const vigInnerRadius = vigOuterRadius * VIGNETTE_softness_factor;

        const vignetteGradient = outputCtx.createRadialGradient(
            centerX, centerY, vigInnerRadius,  // Start of gradient (fully transparent)
            centerX, centerY, vigOuterRadius   // End of gradient (max darkness)
        );
        vignetteGradient.addColorStop(0, 'rgba(0,0,0,0)'); // Center is transparent
        vignetteGradient.addColorStop(1, `rgba(0,0,0,${VIGNETTE_intensity})`); // Edges are dark
        
        outputCtx.fillStyle = vignetteGradient;
        outputCtx.fillRect(0, 0, w, h);
    }

    // --- 4. Film Grain on outputCanvas ---
    // Apply grain over everything else
    if (GRAIN_intensity > 0) {
        const grainCanvas = document.createElement('canvas');
        const grainPatternTileSize = 100; // Size of the repeatable grain pattern
        grainCanvas.width = grainPatternTileSize;
        grainCanvas.height = grainPatternTileSize;
        const grainCtx = grainCanvas.getContext('2d', { alpha: false }); // Opaque pattern
        
        const imageData = grainCtx.createImageData(grainPatternTileSize, grainPatternTileSize);
        const data = imageData.data;
        for (let i = 0; i < data.length; i += 4) {
            const val = Math.floor(Math.random() * 255); // Random grayscale value
            data[i] = val;     // Red
            data[i + 1] = val; // Green
            data[i + 2] = val; // Blue
            data[i + 3] = 255; // Alpha (pattern itself is fully opaque)
        }
        grainCtx.putImageData(imageData, 0, 0);

        const grainPattern = outputCtx.createPattern(grainCanvas, 'repeat');
        
        outputCtx.save();
        outputCtx.globalAlpha = GRAIN_intensity; // Overall intensity of the grain layer
        outputCtx.globalCompositeOperation = 'overlay'; // 'overlay' or 'soft-light' are common for grain
        outputCtx.fillStyle = grainPattern;
        outputCtx.fillRect(0, 0, w, h);
        outputCtx.restore();
    }

    return outputCanvas;
}