Image Redscale Film Filter Effect

function processImage(originalImg, intensity = 1.0) {
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

    const ctx = canvas.getContext('2d');
    if (!ctx) {
        console.error("Canvas 2D context is not available.");
        return canvas; // Return empty canvas or handle error appropriately
    }

    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Clamp intensity to the range [0, 1]
    const clampedIntensity = Math.max(0, Math.min(1, intensity));

    // Define the redscale effect at full intensity (intensity = 1.0)
    // Red channel remains as is.
    // Green channel is attenuated.
    // Blue channel is heavily attenuated.
    const targetGreenAttenuation = 0.6; // How much green to retain at full intensity
    const targetBlueAttenuation = 0.1;  // How much blue to retain at full intensity

    // Calculate effective attenuation based on intensity
    // For intensity = 0, attenuationFactor = 1 (original color)
    // For intensity = 1, attenuationFactor = targetAttenuation
    const effectiveGreenAttenuation = (1.0 - clampedIntensity) + targetGreenAttenuation * clampedIntensity;
    const effectiveBlueAttenuation = (1.0 - clampedIntensity) + targetBlueAttenuation * clampedIntensity;

    for (let i = 0; i < data.length; i += 4) {
        // const r = data[i]; // Red channel remains unchanged
        const g = data[i + 1];
        const b = data[i + 2];
        // Alpha channel data[i+3] remains unchanged

        data[i + 1] = g * effectiveGreenAttenuation; // Apply effect to Green channel
        data[i + 2] = b * effectiveBlueAttenuation;  // Apply effect to Blue channel
        
        // No explicit clamping (e.g. Math.min(255, ...)) is needed here for G and B channels
        // because:
        // 1. Original g, b are 0-255.
        // 2. effectiveGreenAttenuation and effectiveBlueAttenuation will be between targetAttenuation (e.g. 0.1 or 0.6) and 1.0.
        //    This is because targetAttenuations are <= 1 and clampedIntensity is [0,1].
        //    So, g * effectiveGreenAttenuation will be <= g_original <= 255.
        //    And values will be >= 0.
    }

    ctx.putImageData(imageData, 0, 0);

    return canvas;
}