Image Vignette Filter Application

function processImage(originalImg, vignetteColor, strength, innerRadiusFactor, outerRadiusFactor) {
    // Set defaults for parameters if they are not provided
    vignetteColor = typeof vignetteColor !== 'undefined' ? vignetteColor : "black";
    strength = typeof strength !== 'undefined' ? strength : 0.5; // 0.0 (no vignette) to 1.0 (full strength)
    innerRadiusFactor = typeof innerRadiusFactor !== 'undefined' ? innerRadiusFactor : 0.4; // 0.0 to 1.0
    outerRadiusFactor = typeof outerRadiusFactor !== 'undefined' ? outerRadiusFactor : 0.9; // 0.0 to 1.0

    // Validate and clamp parameters to their expected ranges
    strength = Math.max(0, Math.min(1, strength));
    innerRadiusFactor = Math.max(0, Math.min(1, innerRadiusFactor));
    outerRadiusFactor = Math.max(0, Math.min(1, outerRadiusFactor));

    // Conceptually, the outer radius of the vignette effect should not be smaller than the inner radius.
    // If outerRadiusFactor is smaller, set it equal to innerRadiusFactor.
    // This will result in a sharp transition if they are equal.
    if (outerRadiusFactor < innerRadiusFactor) {
        outerRadiusFactor = innerRadiusFactor;
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const w = originalImg.width;
    const h = originalImg.height;

    canvas.width = w;
    canvas.height = h;

    // Draw the original image onto the canvas
    // This needs to be done regardless of vignette strength, as the base is the image itself.
    if (w > 0 && h > 0) {
        ctx.drawImage(originalImg, 0, 0, w, h);
    }

    // If vignette strength is zero, or image has no area, no visible effect is needed beyond drawing the original image.
    if (strength === 0 || w === 0 || h === 0) {
        return canvas;
    }

    // Calculate vignette geometry
    const centerX = w / 2;
    const centerY = h / 2;
    
    // maxImageRadius is the distance from the center to a corner of the image.
    // Using this as a base for radius factors ensures the vignette scales appropriately with image dimensions and aspect ratio.
    const maxImageRadius = Math.sqrt(Math.pow(centerX, 2) + Math.pow(centerY, 2));

    let rEffInner = innerRadiusFactor * maxImageRadius;
    let rEffOuter = outerRadiusFactor * maxImageRadius;

    // Ensure rEffOuter is strictly greater than rEffInner for createRadialGradient.
    // API requires r0 <= r1. If r0 == r1, some browsers might not render gradient correctly or at all.
    // Add a very small offset if they are equal or rEffOuter is somehow still smaller (e.g. due to floating point issues with maxImageRadius).
    if (rEffOuter <= rEffInner) {
        rEffOuter = rEffInner + 0.1; // Add a minimal offset to make the gradient valid and visible.
    }
    
    // Parse vignetteColor to get its R, G, B components.
    // A temporary 1x1 canvas is used for this robustly.
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = 1;
    tempCanvas.height = 1;
    const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true }); 
    
    tempCtx.fillStyle = vignetteColor; // Apply the user-provided color string
    tempCtx.fillRect(0, 0, 1, 1); // Fill a 1x1 pixel area
    
    const colorData = tempCtx.getImageData(0, 0, 1, 1).data; // Read the [R, G, B, A] values
    const R = colorData[0];
    const G = colorData[1];
    const B = colorData[2];
    // The original alpha from colorData[3] is not directly used; 'strength' parameter controls the vignette's final opacity.

    // Create the radial gradient for the vignette effect.
    // The gradient transitions from a transparent version of the vignetteColor (at rEffInner)
    // to an opaque (opacity scaled by 'strength') version of the vignetteColor (at rEffOuter).
    const gradient = ctx.createRadialGradient(centerX, centerY, rEffInner, centerX, centerY, rEffOuter);

    const transparentRgbaColor = `rgba(${R},${G},${B},0)`;           // Inner color stop: vignette color, fully transparent
    const opaqueRgbaColor = `rgba(${R},${G},${B},${strength})`; // Outer color stop: vignette color, with desired strength

    gradient.addColorStop(0, transparentRgbaColor); // Color stop at the start of the gradient (maps to rEffInner)
    gradient.addColorStop(1, opaqueRgbaColor);      // Color stop at the end of the gradient (maps to rEffOuter)

    // Apply the vignette gradient over the drawn image
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, w, h); // Fill the entire canvas with the gradient

    return canvas;
}