Image Box Blur Filter

function processImage(originalImg, radius = 1) {
    let blurRadius = parseInt(String(radius), 10);

    if (isNaN(blurRadius)) {
        blurRadius = 1; // Default to 1 if parsing failed (e.g., for "abc")
    }
    blurRadius = Math.max(0, Math.floor(blurRadius)); // Ensure non-negative integer

    const canvas = document.createElement('canvas');
    // Add { willReadFrequently: true } as an optimization hint for browsers
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Assuming originalImg is a loaded JavaScript Image object.
    const width = originalImg.width;
    const height = originalImg.height;

    canvas.width = width;
    canvas.height = height;

    // If image is not loaded (width/height is 0), return an empty canvas.
    if (width === 0 || height === 0) {
        console.warn("Image has zero dimensions, possibly not loaded.");
        return canvas; 
    }

    ctx.drawImage(originalImg, 0, 0, width, height);

    // If blurRadius is 0, no blur processing is needed.
    // Return the canvas with the original image drawn.
    if (blurRadius === 0) {
        return canvas;
    }

    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        console.error("Failed to get image data, possibly due to cross-origin restrictions:", e);
        // Re-throw the error as the operation cannot be completed.
        // Alternatively, could return the canvas with the original unblurred image,
        // but throwing makes the issue explicit to the caller.
        throw e;
    }
    
    const pixels = imageData.data; // This is a Uint8ClampedArray

    // Create a new ImageData to store the blurred image data.
    // This avoids modifying the source pixels while reading them in the same pass.
    const outputImageData = ctx.createImageData(width, height);
    const outputPixels = outputImageData.data;

    // Iterate over each pixel of the image
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            let sumR = 0, sumG = 0, sumB = 0, sumA = 0;
            let count = 0;

            // Iterate over the box neighborhood defined by blurRadius
            for (let ky = -blurRadius; ky <= blurRadius; ky++) {
                for (let kx = -blurRadius; kx <= blurRadius; kx++) {
                    const currentY = y + ky; // Y-coordinate of the neighbor pixel
                    const currentX = x + kx; // X-coordinate of the neighbor pixel

                    // Check if the neighbor pixel is within the image boundaries
                    if (currentX >= 0 && currentX < width && currentY >= 0 && currentY < height) {
                        // Calculate the 1D index of the neighbor pixel in the pixels array
                        const pixelIndex = (currentY * width + currentX) * 4;
                        sumR += pixels[pixelIndex];     // Red channel
                        sumG += pixels[pixelIndex + 1]; // Green channel
                        sumB += pixels[pixelIndex + 2]; // Blue channel
                        sumA += pixels[pixelIndex + 3]; // Alpha channel
                        count++;
                    }
                }
            }

            // Calculate the 1D index for the current pixel (x,y) in the output array
            const outputIndex = (y * width + x) * 4;
            
            // Set the averaged color values to the output pixel
            // Division by count gives the average. Uint8ClampedArray handles clamping (0-255) and rounding.
            outputPixels[outputIndex]     = sumR / count;
            outputPixels[outputIndex + 1] = sumG / count;
            outputPixels[outputIndex + 2] = sumB / count;
            outputPixels[outputIndex + 3] = sumA / count; 
        }
    }

    // Put the processed (blurred) image data back onto the canvas
    ctx.putImageData(outputImageData, 0, 0);

    return canvas;
}