Website Interface Address Tool Creator Database Studio

function processImage(
    originalImg, 
    url = "https://database.studio/creator/interface", 
    title = "Website Interface | Database Studio", 
    theme = "dark"
) {
    const minWidth = 600;
    const padding = 0;
    
    // Calculate final canvas dimensions
    const W = Math.max(originalImg.width, minWidth);
    const H = 84 + originalImg.height * (W / originalImg.width); // 84px is the height of the browser top bar

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

    // Theme Color Definitions (mimicking modern browser UI)
    const isDark = theme.toLowerCase() !== 'light';
    const frameBg = isDark ? '#202124' : '#dfe1e5';
    const toolbarBg = isDark ? '#323639' : '#ffffff';
    const urlBarBg = isDark ? '#202124' : '#f1f3f4';
    const urlText = isDark ? '#e8eaed' : '#202124';
    const tabText = isDark ? '#9aa0a6' : '#5f6368';

    // 1. Create clipping mask for rounded window corners
    const r = 10;
    ctx.beginPath();
    ctx.moveTo(r, 0);
    ctx.lineTo(W - r, 0);
    ctx.quadraticCurveTo(W, 0, W, r);
    ctx.lineTo(W, H - r);
    ctx.quadraticCurveTo(W, H, W - r, H);
    ctx.lineTo(r, H);
    ctx.quadraticCurveTo(0, H, 0, H - r);
    ctx.lineTo(0, r);
    ctx.quadraticCurveTo(0, 0, r, 0);
    ctx.closePath();
    ctx.clip(); // Apply clipping

    // 2. Draw Top Browser Header Area
    // Main frame wrapper
    ctx.fillStyle = frameBg;
    ctx.fillRect(0, 0, W, 44);

    // Toolbar area
    ctx.fillStyle = toolbarBg;
    ctx.fillRect(0, 44, W, 40);

    // 3. Draw Window Controls (macOS style dots)
    const dotColors = ['#ff5f56', '#ffbd2e', '#27c93f'];
    dotColors.forEach((color, i) => {
        ctx.beginPath();
        ctx.arc(20 + i * 16, 22, 6, 0, Math.PI * 2);
        ctx.fillStyle = color;
        ctx.fill();
    });

    // 4. Draw Active Tab
    ctx.beginPath();
    ctx.moveTo(80, 44);
    ctx.lineTo(80, 20);
    ctx.quadraticCurveTo(80, 12, 88, 12);
    ctx.lineTo(292, 12); 
    ctx.quadraticCurveTo(300, 12, 300, 20);
    ctx.lineTo(300, 44);
    ctx.fillStyle = toolbarBg;
    ctx.fill();

    // Tab Icon/Favicon (generic placeholder)
    ctx.fillStyle = '#4285f4'; // Blue brand color
    ctx.beginPath();
    ctx.arc(104, 28, 6, 0, Math.PI * 2);
    ctx.fill();

    // Tab Text (with clipping to prevent overflow)
    ctx.font = '12px sans-serif';
    ctx.fillStyle = tabText;
    ctx.textBaseline = 'middle';
    ctx.save();
    ctx.beginPath();
    ctx.rect(120, 12, 160, 32);
    ctx.clip();
    ctx.fillText(title, 120, 28);
    ctx.restore();

    // 5. Draw URL Bar
    ctx.beginPath();
    ctx.moveTo(26, 50);
    ctx.lineTo(W - 26, 50);
    ctx.quadraticCurveTo(W - 12, 50, W - 12, 64);
    ctx.quadraticCurveTo(W - 12, 78, W - 26, 78);
    ctx.lineTo(26, 78);
    ctx.quadraticCurveTo(12, 78, 12, 64);
    ctx.quadraticCurveTo(12, 50, 26, 50);
    ctx.fillStyle = urlBarBg;
    ctx.fill();

    // Lock Icon inside URL bar
    ctx.strokeStyle = urlText;
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.arc(30, 62, 3, Math.PI, 0); // Lock loop
    ctx.stroke();
    ctx.strokeRect(27, 62, 6, 5); // Lock body

    // URL Text (with clipping)
    ctx.font = '13.5px sans-serif';
    ctx.fillStyle = urlText;
    ctx.save();
    ctx.beginPath();
    ctx.rect(44, 50, W - 60, 28);
    ctx.clip();
    ctx.fillText(url, 44, 64);
    ctx.restore();

    // 6. Draw the provided Original Image as the "Website Content"
    const imgH = originalImg.height * (W / originalImg.width);
    ctx.drawImage(originalImg, 0, 84, W, imgH);

    // 7. Draw outer border to polish the generator look
    ctx.lineWidth = 2; // Handled nicely against the clipping path
    ctx.strokeStyle = isDark ? '#444' : '#ccc';
    ctx.beginPath();
    ctx.moveTo(r, 0);
    ctx.lineTo(W - r, 0);
    ctx.quadraticCurveTo(W, 0, W, r);
    ctx.lineTo(W, H - r);
    ctx.quadraticCurveTo(W, H, W - r, H);
    ctx.lineTo(r, H);
    ctx.quadraticCurveTo(0, H, 0, H - r);
    ctx.lineTo(0, r);
    ctx.quadraticCurveTo(0, 0, r, 0);
    ctx.closePath();
    ctx.stroke();

    return canvas;
}