Photo B+W Dark Red #29 Filter Effect Application

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for intrinsic image dimensions
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

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

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

    // Try to get image data. This can fail for cross-origin images without CORS.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Error getting image data for processing: ", e);
        // If getImageData fails (e.g. tainted canvas), return the canvas with the original image.
        // The original image is already drawn, so this is a graceful fallback.
        return canvas;
    }
    
    const data = imageData.data;

    // Coefficients for simulating a B+W conversion as if through a Dark Red #29 filter.
    // A Wratten #29 filter is a deep red filter. It passes red light, strongly attenuates
    // green light, and almost completely blocks blue light.
    // This results in reds and yellows appearing very light, greens appearing dark,
    // and blues appearing very dark or black in the B+W image.
    const rCoeff = 0.9; // Red channel contribution to grayscale value
    const gCoeff = 0.1; // Green channel contribution
    const bCoeff = 0.0; // Blue channel contribution (effectively blocked)

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];    // Original Red component
        const g = data[i+1];  // Original Green component
        const b = data[i+2];  // Original Blue component
        // data[i+3] is the Alpha component, which we'll leave unchanged.

        // Calculate the grayscale value based on the filter's characteristics.
        // The sum of these coefficients (0.9 + 0.1 + 0.0 = 1.0) means that a
        // pure white pixel (255, 255, 255) will result in 
        // gray = 255*0.9 + 255*0.1 + 255*0.0 = 229.5 + 25.5 + 0 = 255.
        // So, clamping to 255 is not strictly necessary with these coefficients
        // if input values are within 0-255.
        let gray = (r * rCoeff) + (g * gCoeff) + (b * bCoeff);
        
        // Assign the calculated grayscale value to R, G, and B components
        data[i] = gray;
        data[i+1] = gray;
        data[i+2] = gray;
    }

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

    return canvas;
}