Image Showcasing Союзмультфильм’s Past Programs

async function processImage(originalImg, topText = "Союзмультфильм представляет", bottomText = "Программу прошлых лет", textColor = "#fdfcdd", backgroundColor = "#2a4d85") {
    const fontName = 'Ruslan Display';
    const fontUrl = `https://fonts.googleapis.com/css2?family=${fontName.replace(/ /g, '+')}&display=swap`;

    // Ensure the font is loaded before using it
    try {
        if (!document.querySelector(`link[href="${fontUrl}"]`)) {
            const link = document.createElement('link');
            link.href = fontUrl;
            link.rel = 'stylesheet';
            document.head.appendChild(link);
            // Wait for the font to be loaded and ready to use
            await document.fonts.load(`1em "${fontName}"`);
        } else {
            // If the link tag is already there, still wait for the font to be ready for the current session.
            await document.fonts.load(`1em "${fontName}"`).catch(err => console.warn("Font may not have loaded correctly:", err));
        }
    } catch (e) {
        console.error("Failed to load Google Font:", e);
        // Fallback to a generic serif font if loading fails.
        ctx.font = `${fontSize}px serif`;
    }

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

    // Define layout parameters relative to the image size for better scaling
    const padding = Math.max(20, Math.floor(originalImg.width * 0.08));
    const fontSize = Math.max(24, Math.floor(originalImg.width / 18));
    const textImageSpacing = Math.floor(fontSize * 0.8);

    // Calculate canvas dimensions
    canvas.width = originalImg.width + padding * 2;
    canvas.height = padding * 2 + fontSize * 2 + textImageSpacing * 2 + originalImg.height;

    // --- Start drawing ---

    // 1. Draw the background
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 2. Set up text style
    ctx.fillStyle = textColor;
    ctx.font = `${fontSize}px "${fontName}"`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';

    // 3. Draw the top text
    const topTextY = padding;
    ctx.fillText(topText, canvas.width / 2, topTextY);

    // 4. Draw the image
    const imageY = topTextY + fontSize + textImageSpacing;
    ctx.drawImage(originalImg, padding, imageY, originalImg.width, originalImg.height);

    // 5. Draw the bottom text
    const bottomTextY = imageY + originalImg.height + textImageSpacing;
    ctx.fillText(bottomText, canvas.width / 2, bottomTextY);

    return canvas;
}