Website URL And Icon Image Generator

function processImage(originalImg, url = "https://www.example.com", theme = "light", browserStyle = "mac", padding = 60, width = 1200, bgColor = "#e9ecef") {
    // Parse numeric arguments to ensure they are treated as numbers
    padding = parseInt(padding, 10);
    padding = isNaN(padding) ? 60 : padding;
    
    width = parseInt(width, 10);
    width = isNaN(width) ? 1200 : width;

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

    // Dimensions
    const scale = width / originalImg.width;
    const imgW = width;
    const imgH = originalImg.height * scale;
    const headerH = 60; // Height of the browser address bar area

    canvas.width = imgW + padding * 2;
    canvas.height = imgH + headerH + padding * 2;

    // 1. Draw outer background
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    const wx = padding;
    const wy = padding;

    // Theme Colors
    const isDark = theme.toLowerCase() === "dark";
    const headerBg = isDark ? "#2d2d2d" : "#f1f3f4";
    const addrBg = isDark ? "#1c1c1c" : "#ffffff";
    const textColor = isDark ? "#dedede" : "#202124";
    const iconColor = isDark ? "#9aa0a6" : "#5f6368";
    const borderColor = isDark ? "#3c4043" : "#dadce0";

    // 2. Map out the browser window with a drop shadow
    ctx.save();
    ctx.shadowColor = "rgba(0, 0, 0, 0.15)";
    ctx.shadowBlur = 40;
    ctx.shadowOffsetY = 20;

    // Draw base rounded rectangle to hold the shadow
    drawRoundedRect(ctx, wx, wy, imgW, imgH + headerH, 10);
    ctx.fillStyle = headerBg;
    ctx.fill();
    ctx.restore();

    // 3. Clip perfectly to the rounded window bounds for inner content
    ctx.save();
    drawRoundedRect(ctx, wx, wy, imgW, imgH + headerH, 10);
    ctx.clip();
    
    // Draw Header Background
    ctx.fillStyle = headerBg;
    ctx.fillRect(wx, wy, imgW, headerH);
    
    // Draw Header bottom border
    ctx.fillStyle = borderColor;
    ctx.fillRect(wx, wy + headerH - 1, imgW, 1);

    // 4. Draw Browser Controls (Mac or Windows style)
    if (browserStyle.toLowerCase() !== "windows") {
        // Mac style dotted controls
        const dotY = wy + headerH / 2;
        const dotColors = ["#ff5f56", "#ffbd2e", "#27c93f"];
        for (let i = 0; i < 3; i++) {
            ctx.beginPath();
            ctx.arc(wx + 22 + i * 22, dotY, 6, 0, Math.PI * 2);
            ctx.fillStyle = dotColors[i];
            ctx.fill();
        }
    } else {
        // Windows style control icons on the right
        ctx.strokeStyle = iconColor;
        ctx.lineWidth = 1.2;
        const rightPad = wx + imgW;
        const winY = wy + headerH / 2;
        
        // Minimize
        ctx.beginPath(); ctx.moveTo(rightPad - 110, winY); ctx.lineTo(rightPad - 100, winY); ctx.stroke();
        // Maximize
        ctx.strokeRect(rightPad - 70, winY - 5, 10, 10);
        // Close
        ctx.beginPath(); ctx.moveTo(rightPad - 30, winY - 5); ctx.lineTo(rightPad - 20, winY + 5); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(rightPad - 20, winY - 5); ctx.lineTo(rightPad - 30, winY + 5); ctx.stroke();
    }

    // 5. Draw Address Bar
    const addrW = Math.min(imgW * 0.6, 700);
    const addrH = 34;
    const addrX = wx + (imgW - addrW) / 2;
    const addrY = wy + (headerH - addrH) / 2;

    ctx.fillStyle = addrBg;
    drawRoundedRect(ctx, addrX, addrY, addrW, addrH, 17); // Pill-shaped address bar
    ctx.fill();
    
    // Subtle border for address bar
    ctx.lineWidth = 1;
    ctx.strokeStyle = borderColor;
    ctx.stroke();

    // 6. Draw Security Lock Icon (Favicon area)
    drawLockIcon(ctx, addrX + 20, addrY + addrH / 2, iconColor);

    // 7. Draw URL Text
    ctx.font = "14px 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
    ctx.fillStyle = textColor;
    ctx.textBaseline = "middle";
    // Avoid overflowing the address bar with text
    ctx.fillText(url, addrX + 42, addrY + addrH / 2 + 1, addrW - 80);

    // 8. Draw the main Website Image content (screenshot/mockup)
    ctx.drawImage(originalImg, wx, wy + headerH, imgW, imgH);
    
    ctx.restore();

    return canvas;

    // Helper: Rounded Rectangle
    function drawRoundedRect(context, x, y, w, h, r) {
        context.beginPath();
        context.moveTo(x + r, y);
        context.lineTo(x + w - r, y);
        context.quadraticCurveTo(x + w, y, x + w, y + r);
        context.lineTo(x + w, y + h - r);
        context.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
        context.lineTo(x + r, y + h);
        context.quadraticCurveTo(x, y + h, x, y + h - r);
        context.lineTo(x, y + r);
        context.quadraticCurveTo(x, y, x + r, y);
        context.closePath();
    }

    // Helper: Vector Lock Icon
    function drawLockIcon(context, cx, cy, color) {
        context.save();
        context.strokeStyle = color;
        context.fillStyle = color;
        context.lineWidth = 1.5;
        
        // Lock body
        const bw = 10;
        const bh = 8;
        const bx = cx - bw/2;
        const by = cy - 1;
        drawRoundedRect(context, bx, by, bw, bh, 2);
        context.fill();

        // Lock shackle
        context.beginPath();
        context.arc(cx, by, 3.5, Math.PI, 0);
        context.stroke();
        
        context.restore();
    }
}