Image Freelensing Effect Creator

function processImage(originalImg, pFocusXPercent = 0.5, pFocusYPercent = 0.5, pSharpRadiusPercent = 0.15, pTransitionWidthPercent = 0.15, pBlurAmountPixels = 10) {

    // Sanitize and parse parameters
    let focusXPercent = parseFloat(pFocusXPercent);
    if (isNaN(focusXPercent)) focusXPercent = 0.5; // Default if parsing failed
    focusXPercent = Math.max(0, Math.min(1, focusXPercent));

    let focusYPercent = parseFloat(pFocusYPercent);
    if (isNaN(focusYPercent)) focusYPercent = 0.5; // Default if parsing failed
    focusYPercent = Math.max(0, Math.min(1, focusYPercent));
    
    let sharpRadiusPercent = parseFloat(pSharpRadiusPercent);
    if (isNaN(sharpRadiusPercent)) sharpRadiusPercent = 0.15; // Default if parsing failed
    sharpRadiusPercent = Math.max(0, sharpRadiusPercent); // Can be > 0.5 if desired

    let transitionWidthPercent = parseFloat(pTransitionWidthPercent);
    if (isNaN(transitionWidthPercent)) transitionWidthPercent = 0.15; // Default if parsing failed
    transitionWidthPercent = Math.max(0, transitionWidthPercent);

    let blurAmountPixels = parseFloat(pBlurAmountPixels);
    if (isNaN(blurAmountPixels)) blurAmountPixels = 10; // Default if parsing failed
    blurAmountPixels = Math.max(0, blurAmountPixels);

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

    const imgWidth = originalImg.width;
    const imgHeight = originalImg.height;

    // Handle cases where the image might not be loaded or has zero dimensions
    if (imgWidth === 0 || imgHeight === 0) {
        canvas.width = 1; // Avoid 0x0 canvas, return a 1x1 placeholder
        canvas.height = 1;
        return canvas;
    }

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Calculate absolute pixel values for focus point and radii
    const actualFocusX = imgWidth * focusXPercent;
    const actualFocusY = imgHeight * focusYPercent;
    
    const minDimension = Math.min(imgWidth, imgHeight);
    const innerRadius = minDimension * sharpRadiusPercent; // Radius of the fully sharp area
    // Outer radius where the blur transition ends (becomes fully blurred)
    // transitionWidthPercent is already >=0 due to sanitization.
    const outerRadius = innerRadius + (minDimension * transitionWidthPercent);
    // Note: createRadialGradient requires r1 >= r0. This construction ensures it.

    // 1. Draw the base layer: the original image, potentially blurred.
    if (blurAmountPixels > 0) {
        ctx.filter = `blur(${blurAmountPixels}px)`;
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
        ctx.filter = 'none'; // Important: reset filter immediately after drawing
    } else {
        // If no blur, draw the original image as is.
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    }

    // 2. Create the "sharp" layer on a temporary canvas.
    // This layer will be the original image, masked to reveal only the focus area.
    const sharpCanvas = document.createElement('canvas');
    const sharpCtx = sharpCanvas.getContext('2d');
    sharpCanvas.width = imgWidth;
    sharpCanvas.height = imgHeight;

    // Draw the original (sharp) image onto the temporary canvas.
    sharpCtx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // Apply a radial alpha mask to the sharp layer.
    // 'destination-in' means the existing content of sharpCanvas (the sharp image)
    // is kept where the new shape (the gradient) is opaque, and discarded where transparent.
    sharpCtx.globalCompositeOperation = 'destination-in';

    // Create the radial gradient for the mask.
    // The gradient goes from fully opaque (alpha 1) at innerRadius to fully transparent (alpha 0) at outerRadius.
    const gradient = sharpCtx.createRadialGradient(
        actualFocusX, actualFocusY, innerRadius,
        actualFocusX, actualFocusY, outerRadius
    );

    gradient.addColorStop(0, 'rgba(0,0,0,1)'); // Fully opaque (keep pixels) at the start of the gradient (innerRadius)
    gradient.addColorStop(1, 'rgba(0,0,0,0)'); // Fully transparent (discard pixels) at the end of the gradient (outerRadius)
    // The color (e.g., black R=0,G=0,B=0) doesn't matter for 'destination-in', only alpha.

    sharpCtx.fillStyle = gradient;
    sharpCtx.fillRect(0, 0, imgWidth, imgHeight); // Apply the gradient mask over the entire sharpCanvas

    // Reset composite operation to default for future draws (good practice).
    sharpCtx.globalCompositeOperation = 'source-over';

    // 3. Composite the masked sharp layer onto the main canvas.
    // This draws the focused (sharp, masked) part over the blurred background.
    ctx.drawImage(sharpCanvas, 0, 0, imgWidth, imgHeight);

    return canvas;
}