Image House Sign Maker

async function processImage(originalImg, streetName = 'STREET NAME', houseNumber = '123', textColor = '#FFFFFF', strokeColor = '#000000', fontFamily = 'Oswald') {
    // A mapping for 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', 'sans-serif', 'serif'
    ];

    // Dynamically load the font from Google Fonts if it's not a standard web-safe font
    if (!webSafeFonts.includes(fontFamily)) {
        const fontId = `font-loader-${fontFamily.replace(/\s+/g, '-')}`;
        if (!document.getElementById(fontId)) {
            try {
                const link = document.createElement('link');
                link.id = fontId;
                link.rel = 'stylesheet';
                link.href = `https://fonts.googleapis.com/css2?family=${fontFamily.replace(/\s+/g, '+')}:wght@700&display=swap`;
                document.head.appendChild(link);
                // Wait for the font to be loaded and ready for use
                await document.fonts.load(`bold 12px "${fontFamily}"`);
            } catch (e) {
                console.error(`Could not load Google Font "${fontFamily}". Falling back to sans-serif.`, e);
                fontFamily = 'sans-serif'; // Fallback font
            }
        }
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the image is fully loaded to get its dimensions
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;

    canvas.width = w;
    canvas.height = h;

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

    // --- Text Styling and Positioning ---
    ctx.fillStyle = textColor;
    ctx.strokeStyle = strokeColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Calculate dynamic font sizes and stroke width based on image height
    const houseNumberFontSize = h * 0.3; // 30% of image height
    const streetNameFontSize = h * 0.15; // 15% of image height
    const strokeWidth = Math.max(1, h * 0.015); // 1.5% of height, with a minimum of 1px
    ctx.lineWidth = strokeWidth;
    
    // Calculate positions to center the text block vertically
    const totalTextHeight = houseNumberFontSize + streetNameFontSize;
    const textBlockCenterY = h / 2;
    const houseNumberY = textBlockCenterY - (totalTextHeight * 0.3);
    const streetNameY = textBlockCenterY + (totalTextHeight * 0.35);
    const centerX = w / 2;

    // --- Draw House Number ---
    ctx.font = `bold ${houseNumberFontSize}px "${fontFamily}", sans-serif`;
    // Draw stroke first, then fill, to create a clean border
    ctx.strokeText(houseNumber, centerX, houseNumberY);
    ctx.fillText(houseNumber, centerX, houseNumberY);

    // --- Draw Street Name ---
    ctx.font = `bold ${streetNameFontSize}px "${fontFamily}", sans-serif`;
    ctx.strokeText(streetName.toUpperCase(), centerX, streetNameY);
    ctx.fillText(streetName.toUpperCase(), centerX, streetNameY);
    
    return canvas;
}