Image Building Sign Creator

async function processImage(originalImg, streetName = 'ул. Пушкина', buildingNumber = 'дом 26', signColor = '#00539C', textColor = '#FFFFFF', borderColor = '#FFFFFF', fontFamily = 'PT Sans', width = 600, height = 200) {

    // Although originalImg is a required parameter for the function signature,
    // this tool generates a new image from scratch based on text inputs and does not use a source image.

    let effectiveFont = fontFamily;

    // Dynamically load the 'PT Sans' font if specified and not already available.
    // This font has excellent Cyrillic support, making it ideal for the default text.
    // It is loaded once and then available for subsequent calls.
    if (fontFamily === 'PT Sans' && 'fonts' in document) {
        const fontCheck = `700 16px "${fontFamily}"`;
        if (!document.fonts.check(fontCheck)) {
            try {
                // URL for PT Sans Bold (700)
                const fontUrl = 'https://fonts.gstatic.com/s/ptsans/v17/jizfRExUiTo99u79B_mh0O6tLQ.woff2';
                const fontFace = new FontFace(fontFamily, `url(${fontUrl})`, {
                    weight: '700'
                });
                await fontFace.load();
                document.fonts.add(fontFace);
            } catch (err) {
                console.warn(`Failed to load font: '${fontFamily}'. Falling back to sans-serif.`);
                effectiveFont = 'sans-serif';
            }
        }
    } else if (!('fonts' in document)) {
        // Fallback for older browsers without the FontFace API
        effectiveFont = 'sans-serif';
    }

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

    // Helper function to draw rectangles with rounded corners, compatible with all browsers.
    const drawRoundRect = (x, y, w, h, r) => {
        if (w < 2 * r) r = w / 2;
        if (h < 2 * r) r = h / 2;
        ctx.beginPath();
        ctx.moveTo(x + r, y);
        ctx.arcTo(x + w, y, x + w, y + h, r);
        ctx.arcTo(x + w, y + h, x, y + h, r);
        ctx.arcTo(x, y + h, x, y, r);
        ctx.arcTo(x, y, x + w, y, r);
        ctx.closePath();
    };

    // Define sign properties based on dimensions for a responsive design
    const borderWidth = Math.max(2, height * 0.04);
    const borderRadius = Math.max(5, height * 0.08);
    const textPadding = borderWidth * 2;
    const availableWidth = width - 2 * textPadding;

    // Draw the sign's border by filling a large rounded rectangle
    ctx.fillStyle = borderColor;
    drawRoundRect(0, 0, width, height, borderRadius);
    ctx.fill();

    // Draw the sign's main background on top of the border
    ctx.fillStyle = signColor;
    // Use a slightly smaller radius for the inner rectangle for a better visual effect
    const innerRadius = borderRadius > borderWidth ? borderRadius - borderWidth / 2 : borderRadius * 0.8;
    drawRoundRect(borderWidth, borderWidth, width - 2 * borderWidth, height - 2 * borderWidth, innerRadius);
    ctx.fill();

    // Prepare for drawing text
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    const fontWeight = '700'; // Bold text for signs

    // --- Draw Street Name ---
    const streetText = streetName.toUpperCase();
    // Start with a font size relative to the sign's height and adjust to fit
    let streetFontSize = height * 0.35;
    ctx.font = `${fontWeight} ${streetFontSize}px "${effectiveFont}"`;
    while (ctx.measureText(streetText).width > availableWidth && streetFontSize > 10) {
        streetFontSize--;
        ctx.font = `${fontWeight} ${streetFontSize}px "${effectiveFont}"`;
    }
    // Vertically position in the top section of the inner sign area
    const streetY = borderWidth + ((height - 2 * borderWidth) * 0.35);
    ctx.fillText(streetText, width / 2, streetY);

    // --- Draw Building Number ---
    const numberText = buildingNumber.toUpperCase();
    // Start with a font size relative to the sign's height and adjust to fit
    let numberFontSize = height * 0.25;
    ctx.font = `${fontWeight} ${numberFontSize}px "${effectiveFont}"`;
    while (ctx.measureText(numberText).width > availableWidth && numberFontSize > 10) {
        numberFontSize--;
        ctx.font = `${fontWeight} ${numberFontSize}px "${effectiveFont}"`;
    }
    // Vertically position in the bottom section of the inner sign area
    const numberY = borderWidth + ((height - 2 * borderWidth) * 0.75);
    ctx.fillText(numberText, width / 2, numberY);

    return canvas;
}