Image Anaglyph 3D Filter

function processImage(originalImg, offset = 10) {
    const width = originalImg.width;
    const height = originalImg.height;

    // Create the output canvas that will be returned
    const outputCanvas = document.createElement('canvas');
    outputCanvas.width = width;
    outputCanvas.height = height;
    const outputCtx = outputCanvas.getContext('2d');

    // To get the pixel data of the original image, we first draw it onto a temporary canvas.
    // This is a standard way to access pixel data from an HTMLImageElement.
    const tempReadCanvas = document.createElement('canvas');
    tempReadCanvas.width = width;
    tempReadCanvas.height = height;
    const tempReadCtx = tempReadCanvas.getContext('2d', { willReadFrequently: true });
    tempReadCtx.drawImage(originalImg, 0, 0, width, height);
    const originalImageData = tempReadCtx.getImageData(0, 0, width, height);
    const originalData = originalImageData.data; // Uint8ClampedArray of pixel data

    // Helper function to create a new canvas containing only specific color channels
    // from the original image's pixel data.
    const createChannelFilteredCanvasFromData = (sourcePixelData, filterType) => {
        const canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        // We are writing to this context, not reading frequently with getImageData,
        // so willReadFrequently is not strictly needed here.
        const ctx = canvas.getContext('2d'); 
        
        // Create new ImageData for this canvas
        const newImageData = ctx.createImageData(width, height);
        const newData = newImageData.data;

        // Copy pixel data from source, applying the channel filter
        for (let i = 0; i < newData.length; i += 4) {
            // Copy RGBA values from the original image
            newData[i]   = sourcePixelData[i];     // Red
            newData[i+1] = sourcePixelData[i+1];   // Green
            newData[i+2] = sourcePixelData[i+2];   // Blue
            newData[i+3] = sourcePixelData[i+3];   // Alpha           
            
            // Apply filter: Zero out channels not needed for this layer
            if (filterType === 'red') { // Keep Red, zero out Green and Blue
                newData[i + 1] = 0; // Green component set to 0
                newData[i + 2] = 0; // Blue component set to 0
            } else if (filterType === 'cyan') { // Keep Green and Blue, zero out Red
                newData[i] = 0;     // Red component set to 0
            }
            // Alpha (newData[i+3]) is preserved from the original local pixel
        }
        // Put the modified pixel data onto this new canvas
        ctx.putImageData(newImageData, 0, 0);
        return canvas;
    };
    
    // Create a canvas for the red channel (typically for the left eye)
    const redChannelCanvas = createChannelFilteredCanvasFromData(originalData, 'red');
    // Create a canvas for the cyan channel (green + blue, typically for the right eye)
    const cyanChannelCanvas = createChannelFilteredCanvasFromData(originalData, 'cyan');

    // Calculate the horizontal shift for each layer.
    // The total 'offset' determines the separation; each layer is shifted by half of this.
    const halfOffset = offset / 2;

    // Draw the red channel layer, shifted to the left.
    // Pixels of redChannelCanvas drawn outside outputCanvas bounds will be clipped.
    outputCtx.drawImage(redChannelCanvas, -halfOffset, 0);

    // Set the global composite operation to 'lighter'.
    // This mode adds color values: Cr = Cs + Cd (Result Color = Source Color + Destination Color).
    // Alpha is blended: Ar = As + Ad - As*Ad (if non-premultiplied).
    // This makes (R,0,0) from red layer + (0,G,B) from cyan layer combine to (R,G,B).
    outputCtx.globalCompositeOperation = 'lighter';
    
    // Draw the cyan channel layer, shifted to the right.
    // This will be blended with the existing red layer on outputCtx.
    outputCtx.drawImage(cyanChannelCanvas, halfOffset, 0);

    // Reset the global composite operation to its default value ('source-over').
    // This is important to prevent 'lighter' mode from affecting any subsequent drawing
    // operations on this context if it were to be used further.
    outputCtx.globalCompositeOperation = 'source-over';

    // Return the final canvas with the anaglyph 3D effect.
    return outputCanvas;
}