SEO Topic Search And Idea Generator Tool

function processImage(originalImg, searchTopic = "Website Search") {
    // Create canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set match original image dimensions
    const width = originalImg.width || 800;
    const height = originalImg.height || 600;
    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 text readable
    ctx.fillStyle = 'rgba(15, 23, 42, 0.85)';
    ctx.fillRect(0, 0, width, height);

    // Generate SEO Keyphrase Ideas based on the input topic
    const ideas = [
        `How to optimize ${searchTopic}`,
        `Best ${searchTopic} practices`,
        `${searchTopic} tools`,
        `What is ${searchTopic}`,
        `${searchTopic} alternatives`,
        `Top 10 ${searchTopic} tips`,
        `${searchTopic} tutorial`,
        `Free ${searchTopic}`,
        `${searchTopic} reviews`,
        `${searchTopic} guide 2024`,
        `${searchTopic} for beginners`,
        `Why ${searchTopic} is important`,
        `${searchTopic} vs competitors`,
        `Learn ${searchTopic} online`,
        `Cheap ${searchTopic} services`
    ];

    // Typography & Layout settings
    const baseFontSize = Math.max(14, Math.floor(width / 40));
    const titleSize = Math.floor(baseFontSize * 1.8);
    const paddingX = baseFontSize * 1.2;
    const paddingY = baseFontSize * 0.8;
    const gap = baseFontSize;

    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Helper function to draw rounded rectangles for tags/pills
    function roundRect(ctx, x, y, w, h, r) {
        if (w < 2 * r) r = w / 2;
        if (h < 2 * r) r = h / 2;
        ctx.beginPath();
        ctx.moveTo(x + r, y);
        ctx.arcTo(x + w, y, x + w, y + h, r);
        ctx.arcTo(x + w, y + h, x, y + h, r);
        ctx.arcTo(x, y + h, x, y, r);
        ctx.arcTo(x, y, x + w, y, r);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
    }

    // Draw Dashboard Title
    const titleY = height * 0.15;
    ctx.font = `bold ${titleSize}px sans-serif`;
    ctx.fillStyle = '#10b981'; // SEO Emerald green color
    ctx.fillText(`SEO Keyword Ideas: ${searchTopic}`, width / 2, titleY);

    // Formulate rows of idea pills to fit the canvas width
    ctx.font = `bold ${baseFontSize}px sans-serif`;
    const targetWidth = width * 0.85; // 85% of screen width allowed for tags
    
    const rows = [];
    let currentRow = [];
    let currentRowWidth = 0;

    for (let i = 0; i < ideas.length; i++) {
        const textWidth = ctx.measureText(ideas[i]).width;
        const pillWidth = textWidth + paddingX * 2;

        if (currentRowWidth + pillWidth + gap > targetWidth && currentRow.length > 0) {
            rows.push({ items: currentRow, width: currentRowWidth - gap });
            currentRow = [];
            currentRowWidth = 0;
        }

        currentRow.push({ text: ideas[i], width: pillWidth, textWidth: textWidth });
        currentRowWidth += pillWidth + gap;
    }
    if (currentRow.length > 0) {
        rows.push({ items: currentRow, width: currentRowWidth - gap });
    }

    // Draw the rows on the canvas
    let currentY = titleY + titleSize * 2;
    
    for (let r = 0; r < rows.length; r++) {
        const row = rows[r];
        let xOffset = (width - row.width) / 2; // Dynamically center the row

        for (let i = 0; i < row.items.length; i++) {
            const item = row.items[i];
            const pillHeight = baseFontSize + paddingY * 2;

            // Draw pill background outline
            ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
            ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)';
            ctx.lineWidth = 1.5;
            roundRect(ctx, xOffset, currentY, item.width, pillHeight, pillHeight / 2);

            // Draw pill text
            ctx.fillStyle = '#e2e8f0'; // Light slate text
            ctx.fillText(item.text, xOffset + item.width / 2, currentY + pillHeight / 2);

            xOffset += item.width + gap;
        }
        
        currentY += baseFontSize + paddingY * 2 + gap;

        // Prevent rendering outside of canvas view
        if (currentY > height - (baseFontSize * 2)) break;
    }

    return canvas;
}