Image Lensbaby Selective Focus Filter Effect Tool

function processImage(originalImg, focusRadius = 0.3, blurAmount = 5, transitionWidth = 0.2) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

    // Ensure blurAmount is not negative
    const effectiveBlurAmount = Math.max(0, blurAmount);

    if (effectiveBlurAmount === 0) {
        ctx.drawImage(originalImg, 0, 0, w, h);
        return canvas;
    }

    const centerX = w / 2;
    const centerY = h / 2;
    
    // Calculate radii in pixels.
    // The reference radius (1.0) is half of the smaller dimension of the image.
    const baseReferenceRadius = Math.min(w, h) / 2;

    // Radius where the image is fully sharp. Transition to blur starts here.
    let rInner = Math.max(0, focusRadius) * baseReferenceRadius;
    
    // Radius where the image becomes fully blurred. Transition from sharp ends here.
    let rOuter = (Math.max(0, focusRadius) + Math.max(0, transitionWidth)) * baseReferenceRadius;

    // Ensure rOuter is slightly larger than rInner for the gradient to work correctly,
    // especially if transitionWidth is 0 or very small.
    // A minimal transition of 0.1 pixels will make the gradient valid.
    if (rOuter <= rInner) {
        rOuter = rInner + 0.1;
    }
    
    // --- Main image rendering ---
    // 1. Draw the original sharp image onto the main canvas.
    //    This will be the base layer, parts of which will be revealed.
    ctx.drawImage(originalImg, 0, 0, w, h);

    // --- Create the blurred overlay ---
    // 2. Create a temporary canvas that will hold the blurred version of the image,
    //    with an alpha mask applied for the selective focus.
    const tempBlurCanvas = document.createElement('canvas');
    tempBlurCanvas.width = w;
    tempBlurCanvas.height = h;
    const tempBlurCtx = tempBlurCanvas.getContext('2d');

    // 2a. Draw the original image onto the temporary canvas and apply the blur filter.
    tempBlurCtx.filter = `blur(${effectiveBlurAmount}px)`;
    tempBlurCtx.drawImage(originalImg, 0, 0, w, h);
    tempBlurCtx.filter = 'none'; // Reset filter for subsequent operations on this context.

    // 2b. Modify the alpha channel of the temporary blurred canvas (tempBlurCanvas).
    //     We want its center to be transparent (revealing the sharp main canvas underneath)
    //     and its edges to be opaque (showing the blur).
    //     'destination-in' means: Keep the existing content (blurred image)
    //     where it overlaps with the new shape (the gradient), and use the new shape's alpha.
    tempBlurCtx.globalCompositeOperation = 'destination-in';
    
    // Create a radial gradient mask.
    // - At rInner (and closer to center): Mask is transparent (alpha 0). This makes the blurred image transparent here.
    // - At rOuter (and further from center): Mask is opaque (alpha 1). This makes the blurred image opaque here.
    // - Between rInner and rOuter: Mask transitions from transparent to opaque.
    const gradient = tempBlurCtx.createRadialGradient(centerX, centerY, rInner, centerX, centerY, rOuter);
    gradient.addColorStop(0, 'rgba(0,0,0,0)'); // Corresponds to rInner: blurred layer becomes transparent.
    gradient.addColorStop(1, 'rgba(0,0,0,1)'); // Corresponds to rOuter: blurred layer remains opaque.
    
    tempBlurCtx.fillStyle = gradient;
    tempBlurCtx.fillRect(0, 0, w, h); // Apply the gradient mask to the alpha channel of tempBlurCanvas.

    tempBlurCtx.globalCompositeOperation = 'source-over'; // Reset composite operation.

    // --- Composite blurred overlay onto main canvas ---
    // 3. Draw the tempBlurCanvas (which is blurred centrally transparent) 
    //    onto the main canvas (which currently has the sharp image).
    //    Where tempBlurCanvas is transparent, the sharp image from main canvas shows.
    //    Where tempBlurCanvas is opaque, its blurred content is drawn.
    //    Where tempBlurCanvas is semi-transparent, a blend occurs.
    ctx.drawImage(tempBlurCanvas, 0, 0);

    return canvas;
}