SEO Topic Search Image Finder Tool

function processImage(originalImg, topic = "SEO Tools Finder") {
    // Create a new canvas to process the image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas dimensions to match the original image
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;

    // Draw the original image as background
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Apply a dark semi-transparent overlay to make the foreground pop
    ctx.fillStyle = 'rgba(20, 25, 40, 0.6)';
    ctx.fillRect(0, 0, width, height);

    // Draw SEO Line Chart Graphic (background decoration)
    ctx.globalAlpha = 0.5;
    ctx.strokeStyle = '#34A853'; // Green color for growth
    ctx.lineWidth = Math.max(height * 0.01, 3);
    ctx.lineJoin = 'round';
    
    ctx.beginPath();
    const points = 7;
    for (let i = 0; i <= points; i++) {
        let curX = i * (width / points);
        // Upward trending random line
        let curY = height - (height * 0.1) - (Math.random() * height * 0.3) - (height * 0.4 * (i / points));
        
        if (i === 0) {
            ctx.moveTo(curX, curY);
        } else {
            ctx.lineTo(curX, curY);
        }
        
        // Draw data nodes
        const currentAlpha = ctx.globalAlpha;
        ctx.globalAlpha = 0.9;
        ctx.fillStyle = '#FBBC05'; // Yellow node
        const nodeSize = Math.max(height * 0.02, 6);
        ctx.beginPath();
        ctx.arc(curX, curY, nodeSize / 2, 0, Math.PI * 2);
        ctx.fill();
        ctx.globalAlpha = currentAlpha;
    }
    ctx.stroke();
    ctx.globalAlpha = 1.0;

    // Calculate Search Bar dimensions
    const barWidth = Math.min(width * 0.8, 1000);
    const barHeight = Math.max(Math.min(height * 0.15, 120), 40);
    const barX = (width - barWidth) / 2;
    const barY = (height - barHeight) / 2;
    const cornerRadius = barHeight / 2;

    // Draw Drop Shadow for Search Bar
    ctx.shadowColor = 'rgba(0, 0, 0, 0.4)';
    ctx.shadowBlur = width * 0.02;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = height * 0.01;

    // Draw Search Bar Background
    ctx.beginPath();
    ctx.moveTo(barX + cornerRadius, barY);
    ctx.lineTo(barX + barWidth - cornerRadius, barY);
    ctx.quadraticCurveTo(barX + barWidth, barY, barX + barWidth, barY + cornerRadius);
    ctx.lineTo(barX + barWidth, barY + barHeight - cornerRadius);
    ctx.quadraticCurveTo(barX + barWidth, barY + barHeight, barX + barWidth - cornerRadius, barY + barHeight);
    ctx.lineTo(barX + cornerRadius, barY + barHeight);
    ctx.quadraticCurveTo(barX, barY + barHeight, barX, barY + barHeight - cornerRadius);
    ctx.lineTo(barX, barY + cornerRadius);
    ctx.quadraticCurveTo(barX, barY, barX + cornerRadius, barY);
    ctx.closePath();
    ctx.fillStyle = '#ffffff';
    ctx.fill();

    // Reset shadow
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;

    // Draw Magnifying glass icon inside the Search Bar
    const iconSize = barHeight * 0.35;
    const iconX = barX + cornerRadius + (barWidth * 0.02);
    const iconY = barY + barHeight / 2;
    
    ctx.beginPath();
    ctx.arc(iconX, iconY - iconSize * 0.1, iconSize * 0.4, 0, 2 * Math.PI);
    ctx.lineWidth = Math.max(barHeight * 0.06, 2);
    ctx.strokeStyle = '#4285F4'; // Blue
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(iconX + iconSize * 0.25, iconY + iconSize * 0.15);
    ctx.lineTo(iconX + iconSize * 0.7, iconY + iconSize * 0.6);
    ctx.lineCap = 'round';
    ctx.stroke();

    // Draw "Search" Button on the right inside side of the Search Bar
    const btnWidth = Math.max(barWidth * 0.2, 80);
    const btnPadding = barHeight * 0.1;
    const btnX = barX + barWidth - btnWidth - btnPadding;
    const btnY = barY + btnPadding;
    const btnHeight = barHeight - (btnPadding * 2);
    const btnRadius = btnHeight / 2;

    ctx.beginPath();
    ctx.moveTo(btnX + btnRadius, btnY);
    ctx.lineTo(btnX + btnWidth - btnRadius, btnY);
    ctx.quadraticCurveTo(btnX + btnWidth, btnY, btnX + btnWidth, btnY + btnRadius);
    ctx.lineTo(btnX + btnWidth, btnY + btnHeight - btnRadius);
    ctx.quadraticCurveTo(btnX + btnWidth, btnY + btnHeight, btnX + btnWidth - btnRadius, btnY + btnHeight);
    ctx.lineTo(btnX + btnRadius, btnY + btnHeight);
    ctx.quadraticCurveTo(btnX, btnY + btnHeight, btnX, btnY + btnHeight - btnRadius);
    ctx.lineTo(btnX, btnY + btnRadius);
    ctx.quadraticCurveTo(btnX, btnY, btnX + btnRadius, btnY);
    ctx.closePath();
    ctx.fillStyle = '#4285F4';
    ctx.fill();

    // Button Text
    const btnFontSize = Math.max(btnHeight * 0.4, 12);
    ctx.font = `bold ${btnFontSize}px Arial, sans-serif`;
    ctx.fillStyle = '#ffffff';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText("Search", btnX + btnWidth / 2, btnY + btnHeight / 2);

    // Draw Topic Text (The SEO Search Query)
    const textX = iconX + iconSize + (barWidth * 0.02);
    const textMaxWidth = barWidth - iconSize - btnWidth - cornerRadius * 2;
    const fontSize = Math.max(barHeight * 0.35, 14);
    
    ctx.font = `${fontSize}px Arial, sans-serif`;
    ctx.fillStyle = '#333333';
    ctx.textAlign = 'left';
    
    // Create cursor effect
    const textMeasure = ctx.measureText(topic);
    ctx.fillText(topic, textX, barY + barHeight / 2, textMaxWidth);
    
    // Draw twinkling cursor line
    const cursorX = textX + Math.min(textMeasure.width, textMaxWidth) + (barWidth * 0.01);
    ctx.lineWidth = Math.max(barHeight * 0.04, 2);
    ctx.strokeStyle = '#aaaaaa';
    ctx.beginPath();
    ctx.moveTo(cursorX, barY + barHeight * 0.3);
    ctx.lineTo(cursorX, barY + barHeight * 0.7);
    ctx.stroke();

    return canvas;
}