Image Brightness Adjuster

function processImage(originalImg, brightness = 0) {
    const canvas = document.createElement('canvas');
    
    // Determine image dimensions. Prioritize natural (intrinsic) dimensions for HTMLImageElement,
    // then fall back to styled/attributed dimensions or dimensions of other drawable types (like HTMLCanvasElement).
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // If image dimensions are invalid or zero (e.g., image not loaded, broken, or zero-size canvas),
    // return an empty (0x0) canvas.
    if (!imgWidth || !imgHeight) {
        console.warn("Image has zero width or height, or is not loaded/drawable. Cannot process.");
        // canvas.width and canvas.height will remain at their default (often 0 or a small browser default like 300x150, but spec says 0x0 for unattached canvas)
        // Setting them explicitly to 0 to be sure.
        canvas.width = 0;
        canvas.height = 0;
        return canvas; 
    }

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

    const ctx = canvas.getContext('2d');
    if (!ctx) {
        // This should generally not happen in modern browsers that support canvas.
        console.error("Could not get 2D context from canvas. Returning an empty canvas.");
        // Return canvas (it will be imgWidth x imgHeight but blank).
        return canvas;
    }

    try {
        // Draw the original image onto the canvas.
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This could happen if originalImg is of a type not drawable,
        // or other miscellaneous drawImage errors.
        console.error("Error drawing image onto canvas.", e);
        // Return the canvas, which might be blank or partially drawn, or empty if dimensions were problematic.
        return canvas;
    }

    // Parse the brightness parameter.
    // It can be a number or a string. Default is 0 (no change).
    // parseFloat(String(brightness)) handles both number and string inputs robustly.
    let numericBrightness = parseFloat(String(brightness)); 
    if (isNaN(numericBrightness)) {
        console.warn(`Invalid brightness value: "${brightness}". Using 0 (no change).`);
        numericBrightness = 0;
    }
    
    // Round to the nearest integer for pixel adjustment.
    // This represents the value to add to each R, G, B component.
    // A typical range for 'brightness' might be -255 to 255.
    const adjustment = Math.round(numericBrightness);

    // If adjustment is 0 (e.g. brightness=0, or invalid value parsed to 0),
    // no change is needed. The canvas already contains the original image.
    if (adjustment === 0) {
        return canvas;
    }

    try {
        // Get image data to manipulate pixels.
        // This can throw a SecurityError if the canvas is tainted (e.g., image from another origin without CORS).
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data; // This is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

        // Iterate over each pixel (each pixel has 4 components: R, G, B, A).
        for (let i = 0; i < data.length; i += 4) {
            // Add the adjustment value to Red, Green, and Blue components.
            // The Alpha component (data[i+3]) remains unchanged.
            // Math.max(0, ...) ensures value doesn't go below 0.
            // Math.min(255, ...) ensures value doesn't go above 255.
            data[i] = Math.max(0, Math.min(255, data[i] + adjustment));     // Red
            data[i + 1] = Math.max(0, Math.min(255, data[i + 1] + adjustment)); // Green
            data[i + 2] = Math.max(0, Math.min(255, data[i + 2] + adjustment)); // Blue
        }

        // Put the modified image data back onto the canvas.
        ctx.putImageData(imageData, 0, 0);
    } catch (e) {
        // This error commonly occurs due to CORS policy violations.
        console.error("Error processing image data for brightness adjustment (this can be due to CORS policy or other getImageData/putImageData issues). The canvas will show the original image.", e);
        // In this scenario, the canvas already holds the original image (drawn by `drawImage`).
        // We return it as is, fulfilling the requirement to return a canvas.
    }

    return canvas;
}