DVD Player Topic Image Search Tool

function processImage(originalImg, topic = "🎬 DVD Player", theme = "light") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Setup bounds so the UI elements remain proportional and readable
    const MAX_WIDTH = 1200;
    const MIN_WIDTH = 600;
    
    let targetWidth = originalImg.width;
    let targetHeight = originalImg.height;

    // Scale image dimensions if they fall outside desirable width bounds
    if (targetWidth > MAX_WIDTH) {
        targetHeight = (MAX_WIDTH / targetWidth) * targetHeight;
        targetWidth = MAX_WIDTH;
    } else if (targetWidth < MIN_WIDTH) {
        targetHeight = (MIN_WIDTH / targetWidth) * targetHeight;
        targetWidth = MIN_WIDTH;
    }

    // Determine scale for UI based on a standard 800px width layout
    const scale = targetWidth / 800; 
    const headerHeight = 120 * scale;

    canvas.width = targetWidth;
    canvas.height = targetHeight + headerHeight;

    // Theme color palettes
    const isDark = theme.toLowerCase() === 'dark';
    const bgColor = isDark ? '#202124' : '#ffffff';
    const fgColor = isDark ? '#e8eaed' : '#202124';
    const barColor = isDark ? '#303134' : '#ffffff';
    const barShadow = isDark ? 'rgba(0, 0, 0, 0.4)' : 'rgba(32, 33, 36, 0.28)';
    const tabSelectedColor = isDark ? '#8ab4f8' : '#1a73e8';
    const tabUnselectedColor = isDark ? '#9aa0a6' : '#5f6368';
    const separatorColor = isDark ? '#3c4043' : '#ebebeb';

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

    // 2. Setup Search Bar geometries
    const barX = 20 * scale;
    const barY = 20 * scale;
    const barW = canvas.width - (40 * scale);
    const barH = 46 * scale;
    const radius = 23 * scale;

    // Draw Search Bar with shadow
    ctx.shadowColor = barShadow;
    ctx.shadowBlur = 8 * scale;
    ctx.shadowOffsetY = 2 * scale;

    ctx.beginPath();
    ctx.moveTo(barX + radius, barY);
    ctx.arcTo(barX + barW, barY, barX + barW, barY + radius, radius);
    ctx.arcTo(barX + barW, barY + barH, barX + barW - radius, barY + barH, radius);
    ctx.arcTo(barX, barY + barH, barX, barY + barH - radius, radius);
    ctx.arcTo(barX, barY, barX + radius, barY, radius);
    ctx.closePath();

    ctx.fillStyle = barColor;
    ctx.fill();

    // Reset shadow context for text and subsequent elements
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
    ctx.shadowOffsetY = 0;

    // 3. Draw Search Query Text inside the bar
    ctx.fillStyle = fgColor;
    ctx.font = `${Math.round(18 * scale)}px Arial, sans-serif`;
    ctx.textBaseline = 'middle';
    ctx.fillText(`🔍  ${topic}`, barX + (20 * scale), barY + (barH / 2) + (1 * scale)); // +1 offset for visual harmony

    // 4. Draw Search Engine Tabs
    const tabY = barY + barH + (28 * scale);
    ctx.textBaseline = 'bottom';
    ctx.font = `${Math.round(14 * scale)}px Arial, sans-serif`;
    const tabs = ["🔍 All", "📸 Images", "🎬 Videos", "📰 News", "🛍️ Shopping"];
    let currentX = 35 * scale;

    tabs.forEach((tab, index) => {
        const isSelected = index === 1; // "Images" is hardcoded as the active tab context
        ctx.fillStyle = isSelected ? tabSelectedColor : tabUnselectedColor;
        ctx.fillText(tab, currentX, tabY);

        const textWidth = ctx.measureText(tab).width;

        // Draw tab active underline
        if (isSelected) {
            ctx.fillRect(currentX, tabY + (6 * scale), textWidth, 3 * scale);
        }
        
        currentX += textWidth + (30 * scale); // Add margin between iterables
    });

    // 5. Draw Header-To-Content Separator Line
    ctx.fillStyle = separatorColor;
    ctx.fillRect(0, headerHeight - (1 * scale), canvas.width, 1 * scale);

    // 6. Draw the original image below the engineered search header layout
    ctx.drawImage(originalImg, 0, headerHeight, targetWidth, targetHeight);

    return canvas;
}