Image Gameboy Filter Effect Application

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

    // Set canvas dimensions to match the original image
    // Ensure naturalWidth/Height are used as the originalImg is an Image object
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // If dimensions are zero (e.g., image not loaded or invalid), return an empty canvas
    if (width === 0 || height === 0) {
        console.warn("Original image has zero dimensions. Returning an empty canvas.");
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    canvas.width = width;
    canvas.height = height;

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

    // Get the pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data; // Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

    // Define the Gameboy 4-color palette (classic green)
    // Values from common Gameboy screen emulations
    const palette = [
        { r: 15, g: 56, b: 15 },   // Darkest green (almost black)
        { r: 48, g: 98, b: 48 },   // Dark green
        { r: 139, g: 172, b: 15 }, // Light green
        { r: 155, g: 188, b: 15 }  // Lightest green (yellowish)
    ];

    // Iterate through each pixel (4 bytes at a time: R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // Alpha (data[i+3]) will be preserved

        // Convert the pixel to grayscale using the luminosity method
        // L = 0.299*R + 0.587*G + 0.114*B
        const gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // Determine which palette color to use based on the grayscale value
        // The thresholds divide the 0-255 grayscale range into 4 segments
        let chosenColor;
        if (gray < 64) {         // 0-63
            chosenColor = palette[0];
        } else if (gray < 128) { // 64-127
            chosenColor = palette[1];
        } else if (gray < 192) { // 128-191
            chosenColor = palette[2];
        } else {                 // 192-255
            chosenColor = palette[3];
        }

        // Apply the chosen Gameboy palette color to the pixel
        data[i] = chosenColor.r;
        data[i + 1] = chosenColor.g;
        data[i + 2] = chosenColor.b;
        // data[i+3] (alpha) remains unchanged
    }

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

    // Return the canvas with the Gameboy effect
    return canvas;
}