Image Motivation Commenter

async function processImage(originalImg) {
    const fontName = 'Anton';
    const text = "Пора за дело!";

    // Dynamically load the Google Font if it hasn't been loaded yet.
    // This ensures the text is rendered with the intended impactful style.
    const fontUrl = `https://fonts.googleapis.com/css2?family=${fontName.replace(' ', '+')}&display=swap`;
    if (!document.querySelector(`link[href="${fontUrl}"]`)) {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = fontUrl;
        document.head.appendChild(link);
        try {
            // Wait for the font to be ready before drawing on the canvas
            await document.fonts.load(`1em ${fontName}`);
        } catch (e) {
            console.error('Font could not be loaded:', e);
            // If the font fails, the browser will use the fallback fonts specified later.
        }
    }

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

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

    // Draw the original image as the background of our canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // --- Configure Text Style ---

    // Calculate a font size that is proportional to the image width, with a minimum size
    const fontSize = Math.max(30, Math.floor(canvas.width / 14));
    // Set the font styles, including fallback fonts in case the Google Font fails to load
    ctx.font = `bold ${fontSize}px ${fontName}, Impact, sans-serif`;
    ctx.fillStyle = 'white'; // Text color
    ctx.strokeStyle = 'black'; // Outline color
    // The outline width should also be proportional to the font size
    ctx.lineWidth = Math.max(2, fontSize / 18);
    ctx.textAlign = 'center'; // Center the text horizontally
    ctx.textBaseline = 'bottom'; // Align text from its bottom edge

    // --- Position and Draw Text ---

    // Calculate the coordinates to place the text
    const x = canvas.width / 2; // Horizontally centered
    const y = canvas.height - (canvas.height * 0.05); // 5% padding from the bottom

    // Draw the text outline (stroke) first
    ctx.strokeText(text, x, y);
    // Then draw the solid text (fill) on top of the outline
    ctx.fillText(text, x, y);

    // Return the resulting canvas element
    return canvas;
}