Image Airbrush Filter Effect Tool

async function processImage(originalImg, intensity = 3) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the image is loaded before attempting to get its dimensions
    // This is crucial if originalImg.src was recently set and might not be loaded yet.
    // However, the prompt implies originalImg is an already usable Image object.
    // For robustness if the caller doesn't guarantee it:
    if (originalImg.complete && originalImg.naturalWidth !== 0) {
        // Image is loaded
        setCanvasDimensionsAndDraw();
    } else {
        // If image is not loaded, wait for it
        // This part makes the function async, which is fine by the rules.
        await new Promise((resolve, reject) => {
            originalImg.onload = () => {
                setCanvasDimensionsAndDraw();
                resolve();
            };
            originalImg.onerror = () => {
                // Handle image loading error, e.g., by creating an empty or error-indicating canvas
                console.error("Image could not be loaded for processing.");
                canvas.width = 100; // Default small size
                canvas.height = 100;
                ctx.fillStyle = "lightgray";
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = "red";
                ctx.textAlign = "center";
                ctx.fillText("Error loading image", canvas.width / 2, canvas.height / 2);
                reject(new Error("Image load error"));
            };
            // If src is set but not complete, onload will trigger.
            // If src not set, this won't help, but an Image object without src is not useful.
        });
    }

    function setCanvasDimensionsAndDraw() {
        // Set canvas dimensions to match the original image
        // Use naturalWidth/Height for intrinsic dimensions
        canvas.width = originalImg.naturalWidth;
        canvas.height = originalImg.naturalHeight;

        // Validate and parse the intensity parameter for blur radius
        let blurRadius = Number(intensity);

        // If intensity is not a valid positive number, set blurRadius to 0 (no blur)
        // The default value (e.g., 3) is handled by the function signature if intensity is not provided.
        // This check handles cases where intensity is provided but invalid (e.g., "abc", -5).
        if (isNaN(blurRadius) || blurRadius < 0) {
            blurRadius = 0;
        }

        // Apply the blur filter if blurRadius is greater than 0
        // The `filter` property on the canvas context applies effects to subsequent drawing operations.
        // An "airbrush" effect is typically achieved by softening the image, which blur accomplishes.
        if (blurRadius > 0) {
            ctx.filter = `blur(${blurRadius}px)`;
        }

        // Draw the original image onto the canvas.
        // If a filter is set, it will be applied during this drawing operation.
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

        // It's good practice to reset the filter if the context were to be used further,
        // but since we return the canvas immediately, it's not strictly necessary here.
        // ctx.filter = 'none';
    }

    return canvas;
}