Image Episode Generator

async function processImage(
    originalImg,
    episodeText = 'Как я встретил столб',
    font = 'Oswald',
    fontSize = 60,
    textColor = '#FFFFFF',
    overlayColor = 'rgba(0, 0, 0, 0.65)',
    overlayHeightRatio = 0.15
) {
    /**
     * Dynamically loads a font from Google Fonts by injecting a stylesheet.
     * @param {string} fontFamily - The name of the font family to load.
     * @returns {Promise<void>} A promise that resolves when the stylesheet has been added to the DOM.
     */
    const loadGoogleFont = (fontFamily) => {
        return new Promise((resolve) => {
            const fontName = fontFamily.replace(/\s/g, '+');
            // Request a bold weight (700) as it's common for this meme format.
            const fontUrl = `https://fonts.googleapis.com/css2?family=${fontName}:wght@700&display=swap`;

            // Avoid adding duplicate links
            if (document.querySelector(`link[href="${fontUrl}"]`)) {
                resolve();
                return;
            }

            const link = document.createElement('link');
            link.href = fontUrl;
            link.rel = 'stylesheet';
            link.onload = resolve;
            link.onerror = () => {
                console.warn(`Failed to load stylesheet for Google Font: ${fontFamily}`);
                // Resolve anyway to allow fallback to system fonts.
                resolve();
            };
            document.head.appendChild(link);
        });
    };

    // Load the specified font. This must be awaited to ensure the font is
    // available before being used on the canvas.
    try {
        await loadGoogleFont(font);
        // This second await ensures the font is actually loaded and ready for rendering.
        await document.fonts.load(`700 ${fontSize}px ${font}`);
    } catch (e) {
        console.warn(`Could not render font "${font}". Falling back to system fonts.`);
    }

    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // Calculate the overlay's height and position
    const overlayHeight = Math.max(20, canvas.height * overlayHeightRatio); // min height of 20px
    const overlayY = canvas.height - overlayHeight;

    // Draw the semi-transparent overlay at the bottom
    ctx.fillStyle = overlayColor;
    ctx.fillRect(0, overlayY, canvas.width, overlayHeight);
    
    // --- Text Rendering ---

    // Adjust font size to ensure it fits neatly inside the overlay
    const maxFontSize = overlayHeight * 0.7;
    const actualFontSize = Math.min(fontSize, maxFontSize);

    // Set font style. Use a bold weight and provide fallback fonts.
    ctx.font = `700 ${actualFontSize}px "${font}", Impact, sans-serif`;
    ctx.fillStyle = textColor;
    ctx.textBaseline = 'middle'; // Vertically center text
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';

    // Calculate horizontal padding and vertical position for the text
    const padding = canvas.width * 0.03;
    const textY = overlayY + overlayHeight / 2;

    // Draw "Эпизод:" on the left side of the overlay
    ctx.textAlign = 'left';
    ctx.fillText('Эпизод:', padding, textY);

    // Draw the user-provided episode text on the right side
    ctx.textAlign = 'right';
    ctx.fillText(String(episodeText), canvas.width - padding, textY);

    // Return the final canvas element
    return canvas;
}