Mysterious Photo Filter Tool

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure dimensions are from the original image.
    // naturalWidth/Height are the intrinsic dimensions of the image.
    // Fall back to width/height if naturalWidth/Height are not available (e.g., image not fully loaded, though ideally it should be).
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    canvas.width = width;
    canvas.height = height;

    // --- Filter Parameters (tuned for a "mysterious" look) ---

    // Base effects (applied via ctx.filter string)
    const grayscaleLevel = 1.0;   // Range: 0.0 (no change) to 1.0 (full grayscale). Full grayscale for effective tinting.
    const contrastLevel = 1.3;    // Multiplier. 1.0 is no change, >1.0 increases contrast.
    const brightnessLevel = 0.9;  // Multiplier. 1.0 is no change, <1.0 darkens.

    // Tint color (applied via globalCompositeOperation='color')
    // The 'color' GCO mode uses the hue and saturation of the source, and luminance of the destination.
    // HSL: Hue (0-360), Saturation (0-100%), Lightness (0-100%)
    const tintHue = 220;          // Blueish hue.
    const tintSaturation = 25;    // Lower saturation for a more desaturated, moody tint.
    const tintLightness = 45;     // Lightness of the tint color itself. 50% is neutral.
                                  // This affects the character of the tint, not overall image brightness directly with 'color' GCO.

    // Vignette effect parameters
    const vignetteInnerRadiusRatio = 0.25; // Relative to image diagonal. Where the vignette effect starts (transparent part).
    const vignetteOuterRadiusRatio = 0.95; // Relative to image diagonal. Where the vignette reaches full strength.
                                         // (Using slightly less than 1.0 for outer to ensure edge coverage is strong)
    
    // Color of the vignette (a very dark, desaturated blue, matching the cool theme)
    const vignetteColorHue = 220;
    const vignetteColorSaturation = 20; 
    const vignetteColorLightness = 10; // Very dark.
    const vignetteColorAlpha = 0.75;   // Opacity of the vignette at its darkest part.

    // --- Step 1: Apply base image filters (grayscale, contrast, brightness) ---
    // These filters are applied when drawing the image.
    ctx.filter = `grayscale(${grayscaleLevel}) contrast(${contrastLevel}) brightness(${brightnessLevel})`;
    
    // Draw the original image onto the canvas. Filters are applied during this draw.
    ctx.drawImage(originalImg, 0, 0, width, height);
    
    // Reset the filter property so it doesn't affect subsequent drawing operations (like the tint or vignette).
    ctx.filter = 'none';

    // --- Step 2: Apply color tint ---
    // The 'color' globalCompositeOperation mode is ideal for tinting.
    // It preserves the luminance of the pixels already on the canvas (our filtered image)
    // and applies the hue and saturation from the new drawing operation (our fillStyle color).
    ctx.globalCompositeOperation = 'color';
    ctx.fillStyle = `hsl(${tintHue}, ${tintSaturation}%, ${tintLightness}%)`;
    ctx.fillRect(0, 0, width, height); // Fill the entire canvas with the tint color using 'color' blending.
    
    // Reset composite operation to the default 'source-over' for normal drawing.
    ctx.globalCompositeOperation = 'source-over';

    // --- Step 3: Add Vignette ---
    const centerX = width / 2;
    const centerY = height / 2;

    // Calculate the maximum radius (distance from center to a corner) to ensure vignette covers the whole image.
    const maxRadius = Math.sqrt(Math.pow(centerX, 2) + Math.pow(centerY, 2));
    
    // Calculate actual inner and outer radii for the gradient based on ratios.
    const innerRadius = maxRadius * vignetteInnerRadiusRatio;
    const outerRadius = maxRadius * vignetteOuterRadiusRatio;

    // Create a radial gradient for the vignette effect.
    // Gradient goes from (centerX, centerY) with innerRadius to (centerX, centerY) with outerRadius.
    const gradient = ctx.createRadialGradient(centerX, centerY, innerRadius, centerX, centerY, outerRadius);
    
    // The gradient starts fully transparent in the center.
    gradient.addColorStop(0, 'rgba(0,0,0,0)'); 
    // It fades to the specified vignette color at the edges.
    gradient.addColorStop(1, `hsla(${vignetteColorHue}, ${vignetteColorSaturation}%, ${vignetteColorLightness}%, ${vignetteColorAlpha})`);

    // Apply the vignette gradient.
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height); // Fill the entire canvas with the vignette.

    return canvas;
}