Photo Macro Filter Effect Tool

function processImage(originalImg, focusX = 0.5, focusY = 0.5, focusRadius = 0.15, blurAmount = 4, transitionWidth = 0.1, saturation = 100, contrast = 100) {
    const w = originalImg.width;
    const h = originalImg.height;

    if (w === 0 || h === 0) {
        // Handle case where image might not be loaded or has no dimensions
        console.warn("Original image has zero width or height. Returning an empty_canvas.");
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = w; // typically 0
        emptyCanvas.height = h; // typically 0
        return emptyCanvas;
    }

    // 1. Final Canvas - this will be the canvas returned by the function
    const finalCanvas = document.createElement('canvas');
    finalCanvas.width = w;
    finalCanvas.height = h;
    const finalCtx = finalCanvas.getContext('2d');

    // 2. Blurred Canvas - used for the out-of-focus areas of the image
    const blurredCanvas = document.createElement('canvas');
    blurredCanvas.width = w;
    blurredCanvas.height = h;
    const blurredCtx = blurredCanvas.getContext('2d');

    if (blurAmount > 0) {
        blurredCtx.filter = `blur(${blurAmount}px)`;
    }
    blurredCtx.drawImage(originalImg, 0, 0, w, h);
    if (blurAmount > 0) { // Reset filter to avoid affecting subsequent operations on this context
        blurredCtx.filter = 'none';
    }
    // At this point, blurredCanvas contains the original image, potentially blurred.

    // 3. Mask Canvas - defines the sharp, transition, and blurred areas
    // White areas in the mask correspond to the sharp layer being fully opaque.
    // Black areas correspond to the sharp layer being fully transparent (showing the blurred layer).
    // Grayscale areas create a smooth transition.
    const maskCanvas = document.createElement('canvas');
    maskCanvas.width = w;
    maskCanvas.height = h;
    const maskCtx = maskCanvas.getContext('2d');

    const minDimension = Math.min(w, h);
    const pxFocusX = focusX * w; // Convert normalized X to pixel coordinate
    const pxFocusY = focusY * h; // Convert normalized Y to pixel coordinate
    
    // Calculate actual pixel radii from normalized inputs, ensuring they are not negative
    const actualFocusRadius = Math.max(0, focusRadius * minDimension); // Radius of the fully sharp area
    const actualTransitionWidth = Math.max(0, transitionWidth * minDimension); // Width of the transition zone from sharp to blur
    
    // The outermost radius influenced by the focus effect (sharp area + transition zone)
    const outerRadiusForGradient = actualFocusRadius + actualTransitionWidth;

    // Initialize mask with black (meaning these areas will show the blurred layer by default)
    maskCtx.fillStyle = 'black'; 
    maskCtx.fillRect(0, 0, w, h);

    if (outerRadiusForGradient > 0) { // Draw on mask only if there's a focus area
        if (actualTransitionWidth <= 0) { // Sharp focus, no smooth transition
            maskCtx.fillStyle = 'white'; // Sharp area is fully opaque for the sharp layer
            maskCtx.beginPath();
            maskCtx.arc(pxFocusX, pxFocusY, actualFocusRadius, 0, 2 * Math.PI, false);
            maskCtx.fill();
        } else { // Smooth transition using a radial gradient
            const gradient = maskCtx.createRadialGradient(
                pxFocusX, pxFocusY, actualFocusRadius,      // Inner circle (start of gradient)
                pxFocusX, pxFocusY, outerRadiusForGradient  // Outer circle (end of gradient)
            );
            // At actualFocusRadius (inner edge of transition), mask is white (sharp layer opaque)
            gradient.addColorStop(0, 'white'); 
            // At outerRadiusForGradient (outer edge of transition), mask is black (sharp layer transparent)
            gradient.addColorStop(1, 'black'); 

            maskCtx.fillStyle = gradient;
            maskCtx.beginPath();
            // Apply gradient fill to a circle covering the entire focus effect area
            maskCtx.arc(pxFocusX, pxFocusY, outerRadiusForGradient, 0, 2 * Math.PI, false);
            maskCtx.fill();
        }
    }
    // maskCanvas now defines the opacity for the sharp layer.

    // 4. Sharp Processed Canvas - holds the in-focus version of the image, potentially enhanced
    const sharpProcessedCanvas = document.createElement('canvas');
    sharpProcessedCanvas.width = w;
    sharpProcessedCanvas.height = h;
    const spCtx = sharpProcessedCanvas.getContext('2d');

    // Apply enhancements (saturation, contrast) to the sharp layer if specified
    let filtersToApply = [];
    if (saturation !== 100 && saturation >= 0) { // saturation=0 means grayscale
         filtersToApply.push(`saturate(${saturation}%)`);
    }
    if (contrast !== 100 && contrast >= 0) { // contrast=0 means low contrast
         filtersToApply.push(`contrast(${contrast}%)`);
    }
    
    if (filtersToApply.length > 0) {
        spCtx.filter = filtersToApply.join(' ');
    }
    spCtx.drawImage(originalImg, 0, 0, w, h); // Draw the original image
    if (filtersToApply.length > 0) { // Reset filter
        spCtx.filter = 'none';
    }
    // sharpProcessedCanvas now contains the original image, possibly with color/contrast adjustments.

    // Apply the mask to sharpProcessedCanvas using 'destination-in'.
    // This operation keeps the parts of sharpProcessedCanvas (destination) that overlap
    // with the opaque parts of maskCanvas (source).
    spCtx.globalCompositeOperation = 'destination-in';
    spCtx.drawImage(maskCanvas, 0, 0);
    spCtx.globalCompositeOperation = 'source-over'; // Reset composite operation to default

    // 5. Combine layers on the Final Canvas
    // First, draw the blurred version, which acts as the base layer covering the entire canvas.
    finalCtx.drawImage(blurredCanvas, 0, 0, w, h);
    // Then, draw the sharpProcessedCanvas on top.
    // Areas of sharpProcessedCanvas that were made transparent by the mask will show the underlying blurredCanvas.
    finalCtx.drawImage(sharpProcessedCanvas, 0, 0, w, h);

    return finalCanvas;
}