Image Text Overlay Tool

/**
 * Overlays text onto an image.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {string} text The text string to overlay on the image. Default is "Hello, World!".
 * @param {number} fontSize The font size of the text in pixels. Default is 48.
 * @param {string} fontFamily The font family for the text. Use web-safe fonts or Google Fonts. Default is "Arial".
 * @param {string} textColor A CSS color string for the text fill. Default is "#FFFFFF".
 * @param {number} x The horizontal coordinate (from the left) to place the text. Default is 10.
 * @param {number} y The vertical coordinate (from the top) to place the text. Default is 50.
 * @param {string} textAlign The horizontal alignment of the text ('left', 'center', 'right'). Default is "left".
 * @param {string} textBaseline The vertical alignment of the text ('top', 'middle', 'bottom'). Default is "top".
 * @param {string} strokeColor A CSS color string for the text outline. Default is "#000000".
 * @param {number} strokeWidth The width of the text outline in pixels. A value of 0 means no outline. Default is 2.
 * @returns {HTMLCanvasElement} A new canvas element with the text overlaid on the image.
 */
async function processImage(originalImg, text = 'Hello, World!', fontSize = 48, fontFamily = 'Arial', textColor = '#FFFFFF', x = 10, y = 50, textAlign = 'left', textBaseline = 'top', strokeColor = '#000000', strokeWidth = 2) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

    // Check if the font is a Google Font and load it if necessary
    const isGoogleFont = !document.fonts.check(`${fontSize}px ${fontFamily}`);
    if (isGoogleFont) {
        try {
            const link = document.createElement('link');
            link.href = `https://fonts.googleapis.com/css2?family=${fontFamily.replace(/\s/g, '+')}&display=swap`;
            link.rel = 'stylesheet';
            document.head.appendChild(link);
            await document.fonts.load(`${fontSize}px ${fontFamily}`);
        } catch (e) {
            console.warn(`Could not load Google Font: ${fontFamily}. Using default font.`);
            // Fallback to a web-safe font if loading fails.
            fontFamily = 'Arial';
        }
    }

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

    // Set up the text styling
    ctx.font = `${fontSize}px ${fontFamily}`;
    ctx.fillStyle = textColor;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeWidth;
    ctx.textAlign = textAlign;
    ctx.textBaseline = textBaseline;

    // Draw the text stroke (outline) first if its width is greater than 0
    if (strokeWidth > 0) {
        ctx.strokeText(text, x, y);
    }

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

    // Return the canvas with the overlaid text
    return canvas;
}