Cyrillic Textbox Web Interface Generator

function processImage(originalImg, addressBarText = "https://ваша-ссылка.рф", titleText = "Онлайн Домен", themeColor = "#e8e8e8") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const headerHeight = 85;
    const minWidth = 450;

    // Set canvas dimensions. Ensure it's wide enough for the web interface elements.
    canvas.width = Math.max(originalImg.width, minWidth);
    canvas.height = originalImg.height + headerHeight;

    // Fill background (in case the image is smaller than the minimum width)
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 1. Draw Browser Interface Header (Theme Color)
    ctx.fillStyle = themeColor;
    ctx.fillRect(0, 0, canvas.width, headerHeight);

    // Draw header bottom border
    ctx.strokeStyle = "#cccccc";
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(0, headerHeight);
    ctx.lineTo(canvas.width, headerHeight);
    ctx.stroke();

    // 2. Draw Window Control Buttons (Mac-style)
    const buttonColors = ["#ff5f56", "#ffbd2e", "#27c93f"];
    for (let i = 0; i < buttonColors.length; i++) {
        ctx.beginPath();
        ctx.arc(20 + i * 22, 22, 6, 0, Math.PI * 2);
        ctx.fillStyle = buttonColors[i];
        ctx.fill();
    }

    // 3. Draw Page Title Text (Centered)
    ctx.fillStyle = "#4a4a4a";
    ctx.font = "bold 13px 'Segoe UI', Arial, sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(titleText, canvas.width / 2, 22);

    // 4. Draw Address Bar (Textbox)
    const barX = 20;
    const barY = 42;
    const barWidth = canvas.width - 40;
    const barHeight = 30;
    const radius = 15;

    ctx.fillStyle = "#ffffff";
    
    // Check if the modern roundRect API is supported
    if (ctx.roundRect) {
        ctx.beginPath();
        ctx.roundRect(barX, barY, barWidth, barHeight, radius);
        ctx.fill();
    } else {
        // Fallback for drawing rounded rectangles in older browsers
        ctx.beginPath();
        ctx.moveTo(barX + radius, barY);
        ctx.lineTo(barX + barWidth - radius, barY);
        ctx.arcTo(barX + barWidth, barY, barX + barWidth, barY + radius, radius);
        ctx.lineTo(barX + barWidth, barY + barHeight - radius);
        ctx.arcTo(barX + barWidth, barY + barHeight, barX + barWidth - radius, barY + barHeight, radius);
        ctx.lineTo(barX + radius, barY + barHeight);
        ctx.arcTo(barX, barY + barHeight, barX, barY + barHeight - radius, radius);
        ctx.lineTo(barX, barY + radius);
        ctx.arcTo(barX, barY, barX + radius, barY, radius);
        ctx.fill();
    }

    // Draw Address Bar Border
    ctx.strokeStyle = "#d1d1d1";
    ctx.stroke();

    // 5. Draw Address Box Text (Cyrillic aware)
    ctx.fillStyle = "#333333";
    ctx.font = "14px 'Segoe UI', Arial, sans-serif";
    ctx.textAlign = "left";
    // Using a padlock emoji to simulate a secure connection
    ctx.fillText("🔒 " + addressBarText, barX + 15, barY + barHeight / 2);

    // 6. Draw Original Image below the interface
    // Center the image if canvas was expanded due to minimum width requirement
    const imgX = (canvas.width - originalImg.width) / 2;
    const imgY = headerHeight;
    ctx.drawImage(originalImg, imgX, imgY);

    // Outer outline for the entirety of the browser window mockup
    ctx.strokeStyle = "#b0b0b0";
    ctx.lineWidth = 2;
    ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2);

    return canvas;
}