Christmas Photo Filter

async function processImage(originalImg, snowAmount = 0.7, vignetteDarkness = 0.6, warmthEffect = 0.15) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

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

    // 1. Initial image draw with basic filters
    // Slight saturation, contrast, and brightness boost for a festive sparkle
    let baseFilter = 'saturate(1.15) contrast(1.05) brightness(1.03)';
    ctx.filter = baseFilter;
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    ctx.filter = 'none'; // Reset filter for subsequent operations

    // 2. Apply Warmth Tint (if warmthEffect > 0)
    if (warmthEffect > 0 && warmthEffect <= 0.5) { // Cap warmthEffect for safety
        ctx.globalCompositeOperation = 'soft-light';
        // A soft golden-yellowish color for warmth
        ctx.fillStyle = `rgba(240, 190, 100, ${Math.min(warmthEffect, 0.5)})`;
        ctx.fillRect(0, 0, imgWidth, imgHeight);
        ctx.globalCompositeOperation = 'source-over'; // Reset composite mode
    }

    // 3. Add Snow Effect (if snowAmount > 0)
    if (snowAmount > 0) {
        const numSnowflakesBase = (imgWidth * imgHeight) / 1000; // Base density factor
        const numSnowflakes = Math.floor(numSnowflakesBase * Math.min(snowAmount, 2.0)); // Cap snowAmount

        if (numSnowflakes > 0) {
            for (let i = 0; i < numSnowflakes; i++) {
                const x = Math.random() * imgWidth;
                const y = Math.random() * imgHeight;
                const radius = Math.random() * 1.8 + 0.5; // Snowflakes size range: 0.5px to 2.3px
                const flakeOpacity = 0.5 + Math.random() * 0.5; // Opacity from 0.5 to 1.0

                ctx.beginPath();
                ctx.arc(x, y, radius, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(255, 255, 255, ${flakeOpacity})`;
                ctx.fill();
            }
        }
    }

    // 4. Add Vignette Effect (if vignetteDarkness > 0)
    if (vignetteDarkness > 0 && vignetteDarkness <= 1.0) { // Cap vignetteDarkness
        const centerX = imgWidth / 2;
        const centerY = imgHeight / 2;
        
        // Outer radius is the distance from center to a corner
        const outerRadius = Math.sqrt(Math.pow(centerX, 2) + Math.pow(centerY, 2));
        
        // Inner radius of the vignette (fully transparent part)
        // As vignetteDarkness increases, innerRadiusRatio decreases, making the transparent area smaller.
        const innerRadiusRatio = 1 - (Math.min(vignetteDarkness, 1.0) * 0.8);
        const innerRadius = outerRadius * innerRadiusRatio;

        const gradient = ctx.createRadialGradient(
            centerX, centerY, innerRadius,
            centerX, centerY, outerRadius
        );

        gradient.addColorStop(0, 'rgba(0,0,0,0)'); // Transparent center
        // Darkness/opacity of vignette edges based on vignetteDarkness
        gradient.addColorStop(1, `rgba(0,0,0,${Math.min(vignetteDarkness, 1.0) * 0.7})`); 
        
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, imgWidth, imgHeight);
    }

    return canvas;
}