Image Analog Mixer Fader Control

/**
 * Simulates an analog RGB mixer by adjusting the intensity of the red, green, and blue channels of an image.
 * This function takes an image and three "fader" level parameters to control each color channel.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} [redLevel=1.0] The multiplier for the red channel. 1.0 is original, 0 is no red, 2.0 is double red.
 * @param {number} [greenLevel=1.0] The multiplier for the green channel. 1.0 is original, 0 is no green, 2.0 is double green.
 * @param {number} [blueLevel=1.0] The multiplier for the blue channel. 1.0 is original, 0 is no blue, 2.0 is double blue.
 * @returns {HTMLCanvasElement} A new canvas element displaying the processed image.
 */
function processImage(originalImg, redLevel = 1.0, greenLevel = 1.0, blueLevel = 1.0) {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

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

    // Get the image data from the canvas. Use a try-catch block to handle
    // potential security errors if the image is from a cross-origin source.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, w, h);
    } catch (e) {
        console.error("Could not get image data: ", e);
        // Display an error message on the canvas if we can't process it
        ctx.font = "16px Arial";
        ctx.fillStyle = "red";
        ctx.textAlign = "center";
        ctx.fillText("Error: Cannot process a cross-origin image.", w / 2, h / 2);
        return canvas;
    }

    const data = imageData.data;

    // Iterate through every pixel in the image data array.
    // Each pixel is represented by 4 values: R, G, B, A.
    for (let i = 0; i < data.length; i += 4) {
        // Apply the "fader" level to each color channel
        let r = data[i] * redLevel;
        let g = data[i + 1] * greenLevel;
        let b = data[i + 2] * blueLevel;

        // Clamp the values to ensure they stay within the valid 0-255 range
        data[i] = Math.max(0, Math.min(255, r)); // Red channel
        data[i + 1] = Math.max(0, Math.min(255, g)); // Green channel
        data[i + 2] = Math.max(0, Math.min(255, b)); // Blue channel
        // The alpha channel (data[i + 3]) remains unchanged
    }

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

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