Image Russian Localisation Tool

/**
 * Applies a transparent Russian flag overlay to an image.
 * This is an interpretation of "Russian localisation" as a visual effect.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} overlayOpacity The opacity of the flag overlay, from 0.0 (fully transparent) to 1.0 (fully opaque). Defaults to 0.4.
 * @returns {HTMLCanvasElement} A canvas element with the original image and the flag overlay.
 */
function processImage(originalImg, overlayOpacity = 0.4) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    // Use naturalWidth/Height to get the intrinsic dimensions of the image
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

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

    // Validate and clamp the opacity value to be between 0 and 1
    const alpha = Math.max(0, Math.min(1, parseFloat(overlayOpacity)));

    // Set the global alpha (transparency) for the subsequent drawing operations
    ctx.globalAlpha = alpha;

    // Calculate the height of each of the three color bands of the flag
    const bandHeight = canvas.height / 3;

    // Define the colors of the Russian flag (official GOST R 51130-98 colors)
    const white = '#FFFFFF';
    const blue = '#0039A6';
    const red = '#D52B1E';

    // Draw the top white band
    ctx.fillStyle = white;
    ctx.fillRect(0, 0, canvas.width, bandHeight);

    // Draw the middle blue band
    ctx.fillStyle = blue;
    ctx.fillRect(0, bandHeight, canvas.width, bandHeight);

    // Draw the bottom red band
    ctx.fillStyle = red;
    ctx.fillRect(0, bandHeight * 2, canvas.width, bandHeight);

    // It's good practice to reset globalAlpha back to its default value
    ctx.globalAlpha = 1.0;

    // Return the canvas element
    return canvas;
}