Image Verb Adder

/**
 * Adds verb text overlays to an image.
 * This function takes an image and overlays it with a specified number of verbs,
 * chosen from a provided list, at random positions and sizes.
 *
 * @param {Image} originalImg The original image object to process.
 * @param {string} [verbs='Читать,Писать,Бежать,Прыгать,Лететь,Думать,Смотреть,Слушать,Говорить,Играть,Работать,Отдыхать'] A comma-separated string of verbs to add to the image.
 * @param {number} [verbCount=10] The total number of verbs to place on the image.
 * @param {number} [minFontSize=24] The minimum font size for the verbs.
 * @param {number} [maxFontSize=72] The maximum font size for the verbs.
 * @param {string} [fontFamily='Lobster'] The Google Font family to use for the text. A web-safe font will be used as a fallback if loading fails.
 * @param {string} [fontColor='#FFFFFF'] The fill color of the text.
 * @param {string} [strokeColor='#000000'] The stroke (outline) color of the text for better visibility.
 * @param {number} [strokeWidth=3] The width of the text stroke.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with a canvas element containing the new image with verbs.
 */
async function processImage(
    originalImg,
    verbs = 'Читать,Писать,Бежать,Прыгать,Лететь,Думать,Смотреть,Слушать,Говорить,Играть,Работать,Отдыхать',
    verbCount = 10,
    minFontSize = 24,
    maxFontSize = 72,
    fontFamily = 'Lobster',
    fontColor = '#FFFFFF',
    strokeColor = '#000000',
    strokeWidth = 3
) {
    // Dynamically load the Google Font if it's not already available.
    try {
        if (fontFamily !== 'Arial' && fontFamily !== 'Verdana' && fontFamily !== 'sans-serif') {
            await new Promise((resolve, reject) => {
                 // Check if font is already loaded or being loaded
                if (document.fonts.check(`1em ${fontFamily}`)) {
                    return resolve();
                }

                const fontUrl = `https://fonts.googleapis.com/css2?family=${fontFamily.replace(/\s/g, '+')}&display=swap`;
                
                // Check if the stylesheet link already exists
                if (!document.querySelector(`link[href="${fontUrl}"]`)) {
                    const link = document.createElement('link');
                    link.href = fontUrl;
                    link.rel = 'stylesheet';
                    link.onload = () => {
                        document.fonts.load(`1em ${fontFamily}`).then(resolve).catch(reject);
                    };
                    link.onerror = () => reject(`Could not load font stylesheet: ${fontUrl}`);
                    document.head.appendChild(link);
                } else {
                    // If link exists, just wait for the font to load
                    document.fonts.load(`1em ${fontFamily}`).then(resolve).catch(reject);
                }
            });
        }
    } catch (e) {
        console.error(`Could not load Google Font "${fontFamily}". Falling back to Arial.`, e);
        fontFamily = 'Arial'; // Fallback to a web-safe font
    }


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

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

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

    // Prepare the list of verbs
    const verbArray = verbs.split(',').map(v => v.trim()).filter(v => v.length > 0);
    if (verbArray.length === 0) {
        console.warn("No verbs provided to draw.");
        return canvas; // Return the original image on canvas if no verbs
    }

    // Set up text drawing properties
    ctx.fillStyle = fontColor;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeWidth;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.lineJoin = 'round'; // makes the stroke look nicer

    // Add the specified number of verbs to the canvas
    for (let i = 0; i < verbCount; i++) {
        // Pick a random verb from the list
        const verb = verbArray[Math.floor(Math.random() * verbArray.length)];

        // Choose a random font size within the specified range
        const fontSize = Math.floor(Math.random() * (maxFontSize - minFontSize + 1)) + minFontSize;
        ctx.font = `${fontSize}px ${fontFamily}`;

        // Determine a random position on the canvas, with some padding from the edges
        const textMetrics = ctx.measureText(verb);
        const textWidth = textMetrics.width;
        const textHeight = fontSize; // Approximate height

        const paddingX = textWidth / 2 + 10;
        const paddingY = textHeight / 2 + 10;

        const x = Math.random() * (canvas.width - paddingX * 2) + paddingX;
        const y = Math.random() * (canvas.height - paddingY * 2) + paddingY;

        // Draw the verb text with an outline
        ctx.strokeText(verb, x, y);
        ctx.fillText(verb, x, y);
    }

    // Return the final canvas element
    return canvas;
}