Image Color Wash Filter

function processImage(originalImg, color = "blue", alpha = 0.3) {
    // Ensure originalImg is loaded. If naturalWidth or naturalHeight is 0,
    // the image is likely not loaded, or is a 0-size image.
    // The caller should ideally ensure the image is loaded before calling.
    // For this function, we'll proceed; if dimensions are 0, a 0x0 canvas will be created.

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

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

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

    // 1. Draw the original image onto the main canvas
    // If imgWidth or imgHeight is 0, drawImage might not draw anything or error,
    // but typically it just results in no drawing on a 0-size canvas.
    if (imgWidth > 0 && imgHeight > 0) {
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    }

    // 2. Determine the RGB components of the wash color.
    // The 'alpha' parameter of this function will solely control the wash transparency.
    // Any alpha component in the input 'color' string will be ignored for the final wash alpha,
    // but it will be used by the temporary canvas to correctly parse the color string itself.
    let r, g, b;
    
    // Create a temporary 1x1 canvas to parse the 'color' string.
    // This robustly converts any valid CSS color string (e.g., "red", "#FF0000", "rgba(0,255,0,0.5)")
    // into its R, G, B components.
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = 1;
    tempCanvas.height = 1;
    const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true }); // Optimization hint for getImageData
    
    // Set the fillStyle on the temporary canvas.
    // If 'color' string is invalid, canvas fillStyle specification states it's ignored,
    // meaning it retains its previous value. For a new canvas, this is black ('#000000').
    tempCtx.fillStyle = color; 
    tempCtx.fillRect(0, 0, 1, 1); // Draw the color into the 1x1 pixel.
    
    // Get the RGBA data of the drawn pixel. We only need R, G, B.
    // The alpha component (colorData[3]) from this parsing step is effectively discarded
    // because we use the function's 'alpha' parameter later.
    const colorData = tempCtx.getImageData(0, 0, 1, 1).data;
    r = colorData[0];
    g = colorData[1];
    b = colorData[2];

    // 3. Apply the color wash to the main canvas
    
    // Set the fill style for the wash using the extracted RGB values.
    // The alpha for this fill will be controlled by ctx.globalAlpha.
    ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
    
    // Clamp the 'alpha' parameter to the valid range [0, 1]
    const clampedAlpha = Math.max(0, Math.min(1, alpha));
    
    // Set the global alpha for canvas drawing operations.
    ctx.globalAlpha = clampedAlpha;
    
    // Draw the color wash rectangle over the entire image.
    // The default 'source-over' composite operation will blend this semi-transparent
    // rectangle on top of the previously drawn original image.
    if (imgWidth > 0 && imgHeight > 0) {
        ctx.fillRect(0, 0, imgWidth, imgHeight);
    }
    
    // 4. Reset globalAlpha to its default value (1.0)
    // This is good practice to prevent this global setting from affecting
    // other drawing operations if the canvas context were to be used further.
    ctx.globalAlpha = 1.0;

    return canvas;
}