Image Based Movie Finder Creator

function processImage(originalImg, overlayTitle = "BASED MOVIE FINDER", processingText = "PROCESSING YOUR REQUECT...") {
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

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

    // Calculate dynamic proportions based on image size
    const barHeight = Math.max(40, height * 0.12);
    
    // Draw cinematic letterbox (black bars on top and bottom)
    ctx.fillStyle = '#000000';
    ctx.fillRect(0, 0, width, barHeight);
    ctx.fillRect(0, height - barHeight, width, barHeight);

    // Set up scanner/HUD styles
    const themeColor = '#00FF41'; // Matrix / terminal green
    ctx.strokeStyle = themeColor;
    ctx.fillStyle = themeColor;
    ctx.lineWidth = Math.max(2, width * 0.005);

    // Calculate dimensions for the central viewfinder/scanner box
    const boxWidth = width * 0.6;
    const boxHeight = height * 0.5;
    const cx = width / 2;
    const cy = height / 2;
    const cornerLen = Math.min(boxWidth, boxHeight) * 0.15;

    // Draw viewfinder brackets
    ctx.beginPath();
    
    // Top Left Corner
    ctx.moveTo(cx - boxWidth / 2, cy - boxHeight / 2 + cornerLen);
    ctx.lineTo(cx - boxWidth / 2, cy - boxHeight / 2);
    ctx.lineTo(cx - boxWidth / 2 + cornerLen, cy - boxHeight / 2);
    
    // Top Right Corner
    ctx.moveTo(cx + boxWidth / 2 - cornerLen, cy - boxHeight / 2);
    ctx.lineTo(cx + boxWidth / 2, cy - boxHeight / 2);
    ctx.lineTo(cx + boxWidth / 2, cy - boxHeight / 2 + cornerLen);
    
    // Bottom Right Corner
    ctx.moveTo(cx + boxWidth / 2, cy + boxHeight / 2 - cornerLen);
    ctx.lineTo(cx + boxWidth / 2, cy + boxHeight / 2);
    ctx.lineTo(cx + boxWidth / 2 - cornerLen, cy + boxHeight / 2);
    
    // Bottom Left Corner
    ctx.moveTo(cx - boxWidth / 2 + cornerLen, cy + boxHeight / 2);
    ctx.lineTo(cx - boxWidth / 2, cy + boxHeight / 2);
    ctx.lineTo(cx - boxWidth / 2, cy + boxHeight / 2 - cornerLen);
    
    ctx.stroke();

    // Draw center crosshairs
    const crossSize = Math.min(width, height) * 0.03;
    ctx.beginPath();
    ctx.moveTo(cx - crossSize, cy);
    ctx.lineTo(cx + crossSize, cy);
    ctx.moveTo(cx, cy - crossSize);
    ctx.lineTo(cx, cy + crossSize);
    ctx.stroke();

    // Add scanning lines effect (semi-transparent horizontal lines) over the image area
    ctx.fillStyle = 'rgba(0, 255, 65, 0.08)';
    const scanlineSpacing = Math.max(4, height * 0.02);
    for (let y = barHeight; y < height - barHeight; y += scanlineSpacing) {
        ctx.fillRect(0, y, width, scanlineSpacing * 0.3);
    }

    // Configure text styling
    ctx.fillStyle = themeColor;
    ctx.textBaseline = 'middle';
    
    const mainFontSize = Math.max(16, barHeight * 0.4);
    const subFontSize = Math.max(12, barHeight * 0.3);

    // Draw Top Text (Title)
    ctx.textAlign = 'center';
    ctx.font = `bold ${mainFontSize}px "Courier New", Courier, monospace`;
    ctx.fillText(overlayTitle.toUpperCase(), cx, barHeight / 2);

    // Draw Bottom Text (Processing Status)
    ctx.font = `bold ${subFontSize}px "Courier New", Courier, monospace`;
    ctx.fillText(processingText.toUpperCase(), cx, height - barHeight / 2);

    // Draw internal HUD details
    ctx.textAlign = 'left';
    const hudPadding = Math.max(10, width * 0.01);
    ctx.font = `${subFontSize * 0.8}px "Courier New", Courier, monospace`;
    
    // Add fake diagnostics for the "Movie Finder" vibe
    ctx.fillText("SCANNING PIXELS...", cx - boxWidth / 2 + hudPadding, cy - boxHeight / 2 + hudPadding + subFontSize);
    ctx.fillText("DB_MATCH: SEARCHING...", cx - boxWidth / 2 + hudPadding, cy - boxHeight / 2 + hudPadding + subFontSize * 2.5);
    
    // Add recording dot
    const recDotRadius = subFontSize * 0.4;
    ctx.fillStyle = '#FF0000';
    ctx.beginPath();
    ctx.arc(hudPadding * 2 + recDotRadius, barHeight + hudPadding * 2, recDotRadius, 0, Math.PI * 2);
    ctx.fill();
    ctx.fillStyle = themeColor;
    ctx.fillText("REC", hudPadding * 3 + recDotRadius * 2, barHeight + hudPadding * 2);

    return canvas;
}