IFOE Effect Image Generator

/**
 * Applies the IFOE (Inner Focus Outer Edge) Image Effect.
 * This effect generates a stylized combination of optic contrast enhancement, edge blurring (tilt-shift/depth-of-field feel), 
 * and a vignette that directs the viewer's attention to the inner focus area.
 * 
 * @param {HTMLImageElement} originalImg - The original image to process.
 * @param {number} centerX - X-coordinate ratio for the focus center (0.0 to 1.0). Default is 0.5.
 * @param {number} centerY - Y-coordinate ratio for the focus center (0.0 to 1.0). Default is 0.5.
 * @param {number} focusScale - Size of the focus area radius relative to the image size. Default is 0.6.
 * @param {number} blurIntensity - The amount of blur applied to the outer edges (in pixels). Default is 10.
 * @param {number} opticEnhancement - Level of contrast and saturation multiplier. Default is 1.2.
 * @param {number} vignetteOpacity - Darkness level of the outer edge vignette (0.0 to 1.0). Default is 0.6.
 * @returns {HTMLCanvasElement} - The fully processed image on a canvas.
 */
function processImage(originalImg, centerX = 0.5, centerY = 0.5, focusScale = 0.6, blurIntensity = 10, opticEnhancement = 1.2, vignetteOpacity = 0.6) {
    const width = originalImg.width;
    const height = originalImg.height;

    // Create the main canvas
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Step 1: Base layer - Draw original image with optic enhancement
    // Increases saturation and contrast to make colors pop
    ctx.filter = `contrast(${opticEnhancement}) saturate(${opticEnhancement})`;
    ctx.drawImage(originalImg, 0, 0);
    ctx.filter = 'none'; // reset filter

    // Step 2: Edge Blur layer - Create a blurred copy of the enhanced image
    const blurCanvas = document.createElement('canvas');
    blurCanvas.width = width;
    blurCanvas.height = height;
    const blurCtx = blurCanvas.getContext('2d');

    blurCtx.filter = `blur(${blurIntensity}px) contrast(${opticEnhancement}) saturate(${opticEnhancement})`;
    blurCtx.drawImage(originalImg, 0, 0);
    blurCtx.filter = 'none';

    // Establish scale parameters using mathematical hypotenuse for corner-to-center measurements
    const cx = width * centerX;
    const cy = height * centerY;
    const maxRadius = Math.hypot(width, height) / 2;
    
    // Calculate the transition radii for Inner Focus
    const scale = Math.max(0.01, focusScale);
    const innerR = Math.max(1, maxRadius * (scale * 0.4)); // The radius where blur begins
    const outerR = Math.max(innerR + 1, maxRadius * scale); // The radius where it becomes completely blurred

    // Step 3: Mask out the inner focus from the blur canvas
    blurCtx.globalCompositeOperation = 'destination-out';
    const maskGradient = blurCtx.createRadialGradient(cx, cy, innerR, cx, cy, outerR);
    
    // Center is fully opaque regarding the mask -> erases the blur, revealing the sharp base image underneath
    maskGradient.addColorStop(0, 'rgba(0, 0, 0, 1)'); 
    
    // Edges are fully transparent regarding the mask -> keeps the blur canvas pixels intact
    maskGradient.addColorStop(1, 'rgba(0, 0, 0, 0)'); 
    
    blurCtx.fillStyle = maskGradient;
    blurCtx.fillRect(0, 0, width, height);

    // Step 4: Composite the fully masked blur canvas onto the main canvas
    ctx.drawImage(blurCanvas, 0, 0);

    // Step 5: Apply Outer Edge Vignette to darken the peripheral boundaries
    if (vignetteOpacity > 0) {
        const vigOuter = Math.max(outerR + 1, maxRadius * 1.5);
        const vigGradient = ctx.createRadialGradient(cx, cy, innerR, cx, cy, vigOuter);
        
        vigGradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
        vigGradient.addColorStop(1, `rgba(0, 0, 0, ${vignetteOpacity})`);
        
        ctx.fillStyle = vigGradient;
        ctx.fillRect(0, 0, width, height);
    }

    return canvas;
}