Image Font Selector

/**
 * Overlays text on an image using a specified font, allowing for visual font matching.
 * This function can dynamically load fonts from Google Fonts.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {string} [textToMatch="Sample Text"] The text string to display on the image.
 * @param {string} [fontFamily="Arial"] The font family to use (e.g., "Arial", "Roboto", "Open Sans"). Supports web-safe fonts and Google Fonts.
 * @param {number} [fontSize=48] The font size in pixels.
 * @param {string} [fontColor="black"] The color of the text (e.g., "black", "#FF0000").
 * @param {number} [x=20] The horizontal (X) coordinate to start drawing the text.
 * @param {number} [y=50] The vertical (Y) coordinate to start drawing the text.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves to a canvas element with the image and text drawn on it.
 */
async function processImage(originalImg, textToMatch = "Sample Text", fontFamily = "Arial", fontSize = 48, fontColor = "black", x = 20, y = 50) {
    
    // List of common generic and web-safe font families. We won't try to load these from Google Fonts.
    const webSafeFonts = new Set([
        'arial', 'helvetica', 'verdana', 'geneva', 'tahoma', 'trebuchet ms',
        'times new roman', 'times', 'georgia', 'garamond',
        'courier new', 'courier', 'brush script mt',
        'serif', 'sans-serif', 'monospace', 'cursive', 'fantasy'
    ]);

    let effectiveFontFamily = fontFamily;

    // Dynamically load the font if it's not a common web-safe font.
    if (!webSafeFonts.has(fontFamily.toLowerCase().trim())) {
        try {
            // A unique ID for the stylesheet link to avoid adding it multiple times.
            const linkId = `google-font-stylesheet-${fontFamily.replace(/\s+/g, '-')}`;
            if (!document.getElementById(linkId)) {
                const link = document.createElement('link');
                link.id = linkId;
                link.rel = 'stylesheet';
                link.href = `https://fonts.googleapis.com/css2?family=${fontFamily.replace(/\s/g, '+')}&display=swap`;
                document.head.appendChild(link);
            }
            // Use the Font Loading API to wait until the font is ready for use.
            await document.fonts.load(`${fontSize}px "${fontFamily}"`);
        } catch (error) {
            console.error(`Failed to load font "${fontFamily}". Falling back to Arial.`, error);
            // If the font fails to load, fall back to a web-safe font.
            effectiveFontFamily = "Arial";
        }
    }

    // Create a canvas element
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Get the 2D rendering context
    const ctx = canvas.getContext('2d');

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

    // Set text properties
    ctx.fillStyle = fontColor;
    // Set the font. Quoting the family name is important for names with spaces.
    ctx.font = `${fontSize}px "${effectiveFontFamily}"`;
    // Set baseline to 'top' to make the y-coordinate more intuitive for positioning.
    ctx.textBaseline = 'top';

    // Draw the text on top of the image
    ctx.fillText(textToMatch, x, y);

    // Return the canvas element
    return canvas;
}