Photo Sextant Reading Filter Effect Tool

function processImage(originalImg, filterColor = "#556B2F", intensity = 0.5) {

    // Helper function to parse various color string formats (named, hex, rgb(), etc.)
    // into an array of [R, G, B] components (0-255).
    // It uses a temporary canvas to let the browser's rendering engine do the parsing.
    function _parseColorToRGB(colorStr) {
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = 1;
        tempCanvas.height = 1;
        // Fallback for environments where canvas might not be available (though unlikely for this problem)
        if (!tempCanvas.getContext) { 
            // A very basic fallback for hex colors if canvas parsing fails
            if (colorStr.startsWith('#')) {
                let hex = colorStr.slice(1);
                if (hex.length === 3) hex = hex.split('').map(c => c+c).join('');
                if (hex.length === 6) {
                    return [
                        parseInt(hex.substring(0,2), 16) || 0,
                        parseInt(hex.substring(2,4), 16) || 0,
                        parseInt(hex.substring(4,6), 16) || 0
                    ];
                }
            }
            return [0,0,0]; // Default to black if parsing is problematic
        }

        const tempCtx = tempCanvas.getContext('2d');
        tempCtx.fillStyle = colorStr; // Assign the color string
        tempCtx.fillRect(0, 0, 1, 1); // Draw a 1x1 pixel rectangle filled with this color
        
        // Get the RGBA data of the drawn pixel. data is a Uint8ClampedArray [R, G, B, A].
        const pixelData = tempCtx.getImageData(0, 0, 1, 1).data;
        
        return [pixelData[0], pixelData[1], pixelData[2]]; // Return [R, G, B]
    }

    // Ensure intensity is a number and clamped within the [0, 1] range
    const numIntensity = parseFloat(intensity);
    intensity = isNaN(numIntensity) ? 0.5 : Math.max(0, Math.min(1, numIntensity));

    const canvas = document.createElement('canvas');
    // Use naturalWidth/naturalHeight for HTMLImageElement, fallback to width/height
    // This accounts for the image's intrinsic dimensions once loaded.
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;
    
    // If image dimensions are zero (e.g., image not loaded or invalid),
    // return an empty canvas to avoid errors.
    if (canvas.width === 0 || canvas.height === 0) {
        // console.warn("Image dimensions are zero. Ensure the image is loaded and valid.");
        return canvas; 
    }

    const ctx = canvas.getContext('2d');

    // Parse the user-provided filterColor string (e.g., "green", "#00FF00", "rgb(0,255,0)") to [R,G,B]
    const [r, g, b] = _parseColorToRGB(filterColor);

    // Calculate the effective filter color. This color will be used for multiplication.
    // The intensity parameter blends the chosen filterColor with white.
    // White (255,255,255) is the identity color for 'multiply' blend mode (i.e., R*1=R).
    // So, if intensity is 0, effective color is white (no change to image).
    // If intensity is 1, effective color is the pure filterColor (full effect).
    const effR = Math.round(r * intensity + 255 * (1 - intensity));
    const effG = Math.round(g * intensity + 255 * (1 - intensity));
    const effB = Math.round(b * intensity + 255 * (1 - intensity));
    
    const effectiveFilterColor = `rgb(${effR}, ${effG}, ${effB})`;

    // 1. Draw the original image onto the canvas.
    // The third and fourth parameters for drawImage (width, height) are used to ensure
    // the image is drawn correctly scaled to the canvas dimensions if they differ.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // 2. Apply the 'multiply' globalCompositeOperation.
    // This blend mode multiplies the RGB channels of the existing canvas content (original image)
    // by the RGB channels of the new shape being drawn (the effective filter color).
    // Values are typically normalized (divided by 255) for multiplication.
    ctx.globalCompositeOperation = 'multiply';
    
    // Set the fill style to the calculated effective filter color.
    ctx.fillStyle = effectiveFilterColor;
    
    // Fill the entire canvas with this color. Since the composite operation is 'multiply',
    // this tints and darkens the image according to the effective filter color.
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // 3. Reset globalCompositeOperation to its default 'source-over'.
    // This is important to avoid affecting subsequent drawing operations on this canvas elsewhere.
    ctx.globalCompositeOperation = 'source-over';

    return canvas;
}