Image Text Overlay Creator

async function processImage(
    originalImg,
    text = 'BE STRONG,\nWORK HARD\nBROTHER',
    font = 'Impact',
    fontSize = null,
    color = '#FFFFFF',
    outlineColor = '#000000',
    outlineWidth = null,
    x = null,
    y = null,
    textAlign = 'center',
    lineSpacing = 1.2
) {
    // 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 || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;
    canvas.width = w;
    canvas.height = h;

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

    // --- Calculate dynamic default values ---
    // If a value is null, calculate a default based on image size.
    const finalFontSize = fontSize === null ? Math.max(12, Math.round(w / 12)) : fontSize;
    const finalOutlineWidth = outlineWidth === null ? Math.max(1, Math.round(finalFontSize / 25)) : outlineWidth;
    const finalX = x === null ? w / 2 : x;
    const finalY = y === null ? h / 2 : y;

    // --- Font Loading ---
    const webSafeFonts = [
        "arial", "verdana", "helvetica", "tahoma", "trebuchet ms", 
        "times new roman", "georgia", "garamond", "courier new", 
        "brush script mt", "impact"
    ];
    const isWebSafe = webSafeFonts.some(safeFont => font.toLowerCase().includes(safeFont));

    if (!isWebSafe) {
        try {
            // Attempt to load the font using the Font Loading API.
            // This is a best-effort approach that relies on the browser's ability to find the font
            // (e.g., if it's a known Google Font or a system font).
            await document.fonts.load(`${finalFontSize}px ${font}`);
        } catch (e) {
            console.warn(`Font '${font}' could not be loaded. Falling back to 'Arial'.`, e);
            font = 'Arial'; // Fallback to a web-safe font on failure
        }
    }
    
    // --- Text Styling and Positioning ---
    ctx.font = `${finalFontSize}px ${font}`;
    ctx.fillStyle = color;
    ctx.strokeStyle = outlineColor;
    ctx.lineWidth = finalOutlineWidth;
    ctx.textAlign = textAlign;
    ctx.textBaseline = 'middle'; // Align text vertically to its center

    // --- Drawing Text ---
    const lines = text.split('\n');
    const lineHeight = finalFontSize * lineSpacing;
    const totalTextHeight = (lines.length - 1) * lineHeight;

    // Calculate the Y position for the first line to center the entire text block
    const firstLineY = finalY - totalTextHeight / 2;

    lines.forEach((line, index) => {
        const currentY = firstLineY + (index * lineHeight);

        // Draw outline if width is greater than 0
        if (finalOutlineWidth > 0) {
            ctx.strokeText(line, finalX, currentY);
        }

        // Draw the filled text
        ctx.fillText(line, finalX, currentY);
    });

    // Return the canvas element
    return canvas;
}