Image Blurring Tool

function processImage(originalImg, blurRadius = 5) {
    // Ensure blurRadius is a valid number.
    // parseFloat will convert string representations of numbers (e.g., "10") to actual numbers.
    // If blurRadius is explicitly set to 0, it means no blur.
    let numericBlurRadius = parseFloat(blurRadius);

    // If parsing results in NaN (e.g., blurRadius was "abc") or if the value is negative,
    // revert to a default positive blur radius (e.g., 5px).
    // A blur radius of 0px is valid and means no blur.
    if (isNaN(numericBlurRadius) || numericBlurRadius < 0) {
        numericBlurRadius = 5; 
    }

    const canvas = document.createElement('canvas');
    
    // Use naturalWidth and naturalHeight to get the intrinsic dimensions of the image.
    // These properties are 0 if the image has not loaded or has no dimensions.
    const imgWidth = originalImg.naturalWidth || 0;
    const imgHeight = originalImg.naturalHeight || 0;

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

    const ctx = canvas.getContext('2d');

    // If the canvas context cannot be obtained (highly unlikely for '2d')
    // or if the image has no dimensions (e.g., not loaded or invalid image),
    // return the canvas as is. It will be empty or 0x0.
    if (!ctx || imgWidth === 0 || imgHeight === 0) {
        // Optional: console.warn("Image has zero dimensions or canvas context is unavailable.");
        return canvas;
    }

    // Apply the CSS blur filter to the canvas context.
    // Only apply the filter if the blur radius is greater than 0.
    // If numericBlurRadius is 0, no filter is applied, and the image is drawn as is.
    if (numericBlurRadius > 0) {
        ctx.filter = `blur(${numericBlurRadius}px)`;
    }
    
    // Draw the original image onto the canvas.
    // If a blur filter was set on the context, it will be applied during this drawing operation.
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    
    // The canvas element, now containing the (potentially) blurred image, is returned.
    return canvas;
}