Image Glaze Filter Application

function processImage(originalImg, blurAmount = 2, saturationFactor = 1.2, contrastFactor = 1.1, brightnessFactor = 1.05, overlayColor = "") {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure originalImg is loaded and has dimensions
    if (!originalImg || typeof originalImg.naturalWidth === 'undefined' || originalImg.naturalWidth === 0 || originalImg.naturalHeight === 0) {
        console.error("Original image is not loaded or has no dimensions.");
        // Return an empty canvas or throw an error, depending on desired behavior
        canvas.width = 1; // Avoid 0x0 canvas if error occurs later
        canvas.height = 1;
        return canvas; 
    }

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Construct the filter string
    // blurAmount must be non-negative.
    const actualBlurAmount = Math.max(0, blurAmount);
    
    let filterString = '';
    if (actualBlurAmount > 0) {
        filterString += `blur(${actualBlurAmount}px) `;
    }
    // Add other filters only if they are not identity operations
    if (saturationFactor !== 1) {
        filterString += `saturate(${saturationFactor}) `;
    }
    if (contrastFactor !== 1) {
        filterString += `contrast(${contrastFactor}) `;
    }
    if (brightnessFactor !== 1) {
        filterString += `brightness(${brightnessFactor}) `;
    }

    filterString = filterString.trim();

    // Apply the filters to the context if any filter is specified
    if (filterString) {
        ctx.filter = filterString;
    }

    // Draw the original image onto the canvas.
    // The filter (if any) will be applied during this drawing operation.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Reset the filter before drawing the overlay, so the overlay itself is not filtered.
    if (filterString) {
        ctx.filter = 'none';
    }

    // Apply overlay color if specified and valid
    if (overlayColor && typeof overlayColor === 'string' && overlayColor.trim() !== "") {
        try {
            // Test if overlayColor is a valid CSS color.
            // Setting fillStyle with an invalid color might not throw an error immediately,
            // but might be ignored or revert to black. A simple check can be done by assigning.
            ctx.fillStyle = overlayColor; 
            // A more robust check might involve a temporary element and getComputedStyle, 
            // but for this scope, we assume valid CSS color strings are provided if not empty.
            // Checking if fillStyle was actually set to the desired color (or its parsed equivalent)
            // can be complex due to color name resolutions (e.g. "red" becomes "rgb(255,0,0)").
            // For simplicity, we will trust the input string format.
            
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        } catch (e) {
            console.warn("Invalid overlayColor provided:", overlayColor, e);
            // Optionally, do not apply overlay if color is invalid
        }
    }

    return canvas;
}