Image Noir Filter Application

function processImage(originalImg, initialContrastFactor = 2.0, initialBrightnessOffset = -15) {
    // Ensure parameters are numeric by parsing them.
    // parseFloat will handle inputs that are already numbers (it returns them as is)
    // or numeric strings (it parses them).
    // If parsing results in NaN (e.g., for non-numeric strings like "abc"),
    // operations involving NaN will result in NaN values for pixels.
    // When NaN is assigned to a Uint8ClampedArray, it's converted to 0.
    // This means invalid string parameters for contrast/brightness will result in black pixels,
    // which is an acceptable fallback behavior.
    const contrastFactor = parseFloat(initialContrastFactor);
    const brightnessOffset = parseFloat(initialBrightnessOffset);

    // 1. Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 2. Set canvas dimensions to the natural dimensions of the image
    // Using naturalWidth/naturalHeight is robust for images that might have CSS styling
    // or haven't fully resolved their rendered dimensions in some contexts.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // 3. Handle cases where the image might have zero dimensions to prevent errors.
    // Some browsers (e.g., Firefox) throw an error if getImageData is called on a canvas with zero width or height.
    if (canvas.width === 0 || canvas.height === 0) {
        return canvas; // Return the empty (0-size) canvas directly.
    }

    // 4. Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // 5. Get the image data from the canvas
    // This returns a flat array of RGBA values for each pixel.
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray

    // 6. Process each pixel
    for (let i = 0; i < data.length; i += 4) {
        // Get RGB values for the current pixel
        const r = data[i];
        const g = data[i+1];
        const b = data[i+2];
        // Alpha channel (data[i+3]) is typically left unchanged for a noir filter.

        // Step 1: Convert to grayscale using the luminosity method
        // This formula approximates human perception of brightness.
        let gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // Step 2: Apply contrast adjustment
        // The formula ((value/255 - 0.5) * contrast + 0.5) * 255 scales values
        // away from the midpoint (127.5), increasing perceived contrast.
        // A contrastFactor of 1.0 means no change. Values > 1 increase contrast.
        gray = ((gray / 255.0 - 0.5) * contrastFactor + 0.5) * 255.0;
        
        // Step 3: Apply brightness offset
        // This shifts the overall brightness. Negative values darken the image.
        gray += brightnessOffset;

        // Step 4: Clamp the gray value to the valid [0, 255] range
        // Math.max/min ensures values don't go out of bounds.
        // If 'gray' is NaN at this point (due to NaN contrastFactor or brightnessOffset),
        // it will remain NaN after this step.
        gray = Math.max(0, Math.min(255, gray));
        
        // Step 5: Assign the new gray value to R, G, and B channels
        // If 'gray' is NaN, the Uint8ClampedArray specification states that
        // assigning NaN will result in the value 0.
        data[i] = gray;     // Red channel
        data[i+1] = gray;   // Green channel
        data[i+2] = gray;   // Blue channel
        // data[i+3] (alpha) remains unchanged
    }

    // 7. Put the modified image data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    // 8. Return the canvas with the noir-filtered image
    return canvas;
}