Image Gloomy Effect Editor

function processImage(originalImg, desaturation = 0.7, brightness = -0.15, coolTone = 0.2, vignette = 0.6) {
    // Create a canvas element to draw the new image on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the dimensions of the original image
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;

    // Set the canvas dimensions to match the image
    canvas.width = w;
    canvas.height = h;

    // --- Step 1: Apply core gloom effect using filters ---
    // The context.filter property works like CSS filters and is often hardware accelerated.
    // We combine saturation and brightness adjustments here.
    const saturationValue = Math.max(0, 1 - desaturation);
    const brightnessValue = Math.max(0, 1 + brightness);

    ctx.filter = `saturate(${saturationValue}) brightness(${brightnessValue})`;

    // Draw the image onto the canvas with the filters applied
    ctx.drawImage(originalImg, 0, 0, w, h);

    // Reset the filter so subsequent drawing operations are not affected
    ctx.filter = 'none';

    // --- Step 2: Apply a cool color tone overlay ---
    // This adds a blue-ish tint to the image.
    if (coolTone > 0) {
        // The 'overlay' blend mode works well for tinting, as it interacts with the
        // existing lights and darks of the image.
        ctx.globalCompositeOperation = 'overlay';
        // A muted, dark cyan/blue color. The alpha is controlled by the coolTone parameter.
        ctx.fillStyle = `rgba(0, 100, 150, ${coolTone})`;
        ctx.fillRect(0, 0, w, h);
        // Reset the composite operation for the next step
        ctx.globalCompositeOperation = 'source-over';
    }

    // --- Step 3: Apply a vignette effect ---
    // This darkens the corners of the image, drawing focus to the center.
    if (vignette > 0) {
        const centerX = w / 2;
        const centerY = h / 2;

        // The inner radius defines the start of the vignette gradient (the clear area).
        // It's scaled by the smaller of the width or height to look good on non-square images.
        const innerRadius = Math.min(centerX, centerY) * (1 - vignette);

        // The outer radius should extend to the corners to cover the entire image.
        const outerRadius = Math.sqrt(centerX * centerX + centerY * centerY);

        // Create a radial gradient from the center outwards
        const gradient = ctx.createRadialGradient(centerX, centerY, innerRadius, centerX, centerY, outerRadius);

        // The center of the gradient is transparent
        gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
        // The edge is dark. The vignette parameter controls the final darkness.
        gradient.addColorStop(1, `rgba(0, 0, 0, ${Math.min(1, vignette)})`);

        // Apply the gradient over the entire canvas
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, w, h);
    }

    // Return the final canvas element
    return canvas;
}