Image Focus Filter Tool

/**
 * Applies a focus filter to an image. A specific area of the image remains sharp
 * while the rest is blurred.
 *
 * @param {HTMLImageElement} originalImg - The javascript Image object. It's assumed to be fully loaded.
 * @param {string} [shape="circle"] - The shape of the focus area. Valid values are "circle" or "rectangle".
 * @param {number} [centerXPercent=0.5] - The x-coordinate of the focus area's center, as a percentage of the image's width (e.g., 0.5 for center).
 * @param {number} [centerYPercent=0.5] - The y-coordinate of the focus area's center, as a percentage of the image's height (e.g., 0.5 for center).
 * @param {number} [radiusPercent=0.25] - For a "circle" shape: the radius of the focus circle, as a percentage of the image's smaller dimension (width or height). Ignored for "rectangle".
 * @param {number} [rectWidthPercent=0.4] - For a "rectangle" shape: the width of the focus rectangle, as a percentage of the image's width. Ignored for "circle".
 * @param {number} [rectHeightPercent=0.4] - For a "rectangle" shape: the height of the focus rectangle, as a percentage of the image's height. Ignored for "circle".
 * @param {number} [blurStrength=5] - The intensity of the blur effect (in pixels) applied to the out-of-focus areas. A value of 0 means no blur.
 * @returns {HTMLCanvasElement} A new canvas element displaying the image with the focus filter applied.
 */
function processImage(
    originalImg,
    shape = "circle",
    centerXPercent = 0.5,
    centerYPercent = 0.5,
    radiusPercent = 0.25, // For circle shape
    rectWidthPercent = 0.4, // For rectangle shape
    rectHeightPercent = 0.4, // For rectangle shape
    blurStrength = 5
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    // It's crucial that the image is loaded and has dimensions.
    if (imgWidth === 0 || imgHeight === 0) {
        // Fallback for unloaded or zero-size image: return a tiny, empty canvas.
        console.warn("Image not loaded or has zero dimensions. Returning 1x1 canvas.");
        canvas.width = 1;
        canvas.height = 1;
        return canvas;
    }

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

    // Step 1: Draw the entire image onto the canvas. If blurStrength > 0, apply blur.
    // This creates the (potentially) blurred background.
    if (blurStrength > 0) {
        ctx.filter = `blur(${blurStrength}px)`;
    }
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    
    // Reset the filter if it was applied, so the focused part is drawn sharply.
    if (blurStrength > 0) {
        ctx.filter = 'none';
    }

    // Step 2: Define the focus area path.
    // We save the context state because we'll be applying a clipping path.
    ctx.save(); // Save context state (mainly for clipping path)
    ctx.beginPath(); // Start a new path for the focus area

    let hasValidFocusArea = false;

    const actualCenterX = centerXPercent * imgWidth;
    const actualCenterY = centerYPercent * imgHeight;

    if (shape === "circle") {
        const minDimension = Math.min(imgWidth, imgHeight);
        const actualRadius = radiusPercent * minDimension;
        
        if (actualRadius > 0) {
            ctx.arc(actualCenterX, actualCenterY, actualRadius, 0, 2 * Math.PI, false);
            hasValidFocusArea = true;
        }
    } else if (shape === "rectangle") {
        const actualRectWidth = rectWidthPercent * imgWidth;
        const actualRectHeight = rectHeightPercent * imgHeight;

        if (actualRectWidth > 0 && actualRectHeight > 0) {
            const rectX = actualCenterX - actualRectWidth / 2;
            const rectY = actualCenterY - actualRectHeight / 2;
            ctx.rect(rectX, rectY, actualRectWidth, actualRectHeight);
            hasValidFocusArea = true;
        }
    } else {
        // If shape is unknown, we don't define a focus area.
        // The canvas will contain the image as drawn in Step 1 (blurred or original).
        console.warn(`Unknown focus shape: "${shape}". The image will be entirely blurred (if blurStrength > 0) or original.`);
    }

    // Step 3: If a valid focus area was defined, clip to it and redraw the original image sharply.
    if (hasValidFocusArea) {
        ctx.clip(); // Apply the clipping path (circle or rectangle).
        // Redraw the original, unblurred image. Due to the clip,
        // it will only appear within the focus area, "overwriting" the blurred version.
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    }
    // If no valid focus area (e.g., radius <= 0, rect dims <=0, or unknown shape),
    // this step is skipped. The canvas remains as prepared in Step 1.

    // Restore the context to its state before ctx.save() (i.e., remove clipping path).
    ctx.restore();

    return canvas;
}