Image Name Alphabet Translator

/**
 * Translates a given text onto an image using a specified alphabet (font).
 * This function draws the provided text over the original image, simulating a title or a label.
 * It can load fonts from Google Fonts dynamically.
 *
 * @param {Image} originalImg The original JavaScript Image object.
 * @param {string} text The text to write on the image. Defaults to "HELLO WORLD".
 * @param {string} font The font family to use. Can be a web-safe font or a Google Font name. Defaults to "Impact".
 * @param {number} fontSize The initial font size in pixels. It will be automatically reduced if the text is too wide for the image. Defaults to 72.
 * @param {string} fontColor The color of the text. Defaults to "white".
 * @param {string} strokeColor The color of the text outline. Defaults to "black".
 * @param {number} strokeWidth The width of the text outline in pixels. Defaults to 4.
 * @param {string} position The position of the text on the image. Can be "top", "center", or "bottom". Defaults to "center".
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with a new canvas element containing the image with the text drawn on it.
 */
async function processImage(
    originalImg,
    text = "HELLO WORLD",
    font = "Impact",
    fontSize = 72,
    fontColor = "white",
    strokeColor = "black",
    strokeWidth = 4,
    position = "center"
) {

    // Helper function to dynamically load a Google Font
    const loadFont = (fontName) => {
        return new Promise((resolve, reject) => {
            // A list of common web-safe fonts to avoid trying to load them from Google Fonts.
            const webSafeFonts = [
                "arial", "verdana", "helvetica", "tahoma", "trebuchet ms", "times new roman",
                "georgia", "garamond", "courier new", "brush script mt", "impact", "comic sans ms"
            ];
            
            const lowerCaseFontName = fontName.toLowerCase();

            // Check if font is web-safe or already loaded/loading
            if (webSafeFonts.includes(lowerCaseFontName) || document.fonts.check(`1em "${fontName}"`)) {
                resolve();
                return;
            }

            const fontId = `font-link-${fontName.replace(/\s/g, '-')}`;
            if (document.getElementById(fontId)) {
                // Link tag already exists, assume font is loading or loaded
                document.fonts.load(`1em "${fontName}"`).then(resolve).catch(reject);
                return;
            }

            const link = document.createElement('link');
            const sanitizedFontName = fontName.replace(/\s/g, '+');
            link.id = fontId;
            link.href = `https://fonts.googleapis.com/css2?family=${sanitizedFontName}:wght@400;700&display=swap`;
            link.rel = 'stylesheet';

            link.onload = () => {
                // The stylesheet is loaded, but we need to wait for the font file to be ready.
                document.fonts.load(`1em "${fontName}"`).then(resolve).catch(reject);
            };
            link.onerror = () => reject(new Error(`Failed to load stylesheet for font: ${fontName}`));

            document.head.appendChild(link);
        });
    };

    let activeFont = font;
    // Wait for the font to be ready for use
    try {
        await loadFont(font);
    } catch (error) {
        console.error(error);
        // Fallback to a web-safe font if loading fails
        activeFont = "Arial";
    }

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

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

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

    // --- Text Drawing ---
    
    // Auto-adjust font size if text is too wide for the canvas
    const padding = w * 0.05; // 5% padding
    let currentFontSize = fontSize;
    
    do {
        ctx.font = `${currentFontSize}px "${activeFont}"`;
        if (ctx.measureText(text).width <= w - padding) {
            break;
        }
        currentFontSize -= 1;
    } while (currentFontSize > 10)

    // Set text drawing properties
    ctx.fillStyle = fontColor;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeWidth;
    ctx.textAlign = 'center';

    // Calculate text position
    const x = w / 2;
    let y;
    const margin = currentFontSize * 0.25; // A small margin from the edge

    switch (position.toLowerCase()) {
        case 'top':
            ctx.textBaseline = 'top';
            y = margin;
            break;
        case 'bottom':
            ctx.textBaseline = 'bottom';
            y = h - margin;
            break;
        case 'center':
        default:
            ctx.textBaseline = 'middle';
            y = h / 2;
            break;
    }

    // Draw the text (stroke first for outline, then fill)
    ctx.strokeText(text, x, y);
    ctx.fillText(text, x, y);

    // Return the final canvas element
    return canvas;
}