Image Red Filter Application

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

    // Get the natural dimensions of the original image
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // If the image has no dimensions (e.g., not loaded or invalid),
    // return an empty canvas.
    if (width === 0 || height === 0) {
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    // Set the canvas dimensions to match the image
    canvas.width = width;
    canvas.height = height;

    // Draw the original image onto the canvas
    // The third and fourth parameters for drawImage (destWidth, destHeight)
    // a_re optional if source and dest dimensions are the same, but explicit is clearer.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Get the ImageData object, which contains the pixel data for the canvas region
    // Note: This can throw a security error if the image is cross-origin and taints the canvas.
    // The problem assumes originalImg is usable in a way that allows this operation.
    const imageData = ctx.getImageData(0, 0, width, height);
    
    // data is a Uint8ClampedArray representing a one-dimensional array containing the data
    // in the RGBA order, with integer values between 0 and 255 (inclusive).
    const data = imageData.data;

    // Iterate over each pixel in the imageData array
    // Each pixel consists of 4 values: R, G, B, A
    for (let i = 0; i < data.length; i += 4) {
        // data[i]     is the Red component
        // data[i + 1] is the Green component
        // data[i + 2] is the Blue component
        // data[i + 3] is the Alpha component

        // To apply a red filter, we keep the red component as is,
        // and set the green and blue components to 0.
        // The alpha component remains unchanged to preserve any transparency.

        // data[i] = data[i]; // Red component remains unchanged
        data[i + 1] = 0;   // Set Green component to 0
        data[i + 2] = 0;   // Set Blue component to 0
        // data[i + 3] = data[i + 3]; // Alpha component remains unchanged
    }

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

    // Return the canvas element with the filtered image
    return canvas;
}