Movie Studio Database Search Text Creator

function processImage(
    originalImg,
    title = "База Данных Киностудии Года",
    searchQuery = "Создатель текста поиска...",
    themeColor = "#00E5FF",
    overlayOpacity = 0.6,
    showScanlines = 1
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;

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

    // Apply dark cinematic overlay for HUD contrast
    ctx.fillStyle = `rgba(10, 15, 20, ${overlayOpacity})`;
    ctx.fillRect(0, 0, width, height);

    const cx = width / 2;
    const cy = height / 2;

    const minDim = Math.min(width, height);
    const barWidth = Math.min(width * 0.8, 1200);
    const barHeight = Math.max(Math.min(height * 0.08, 100), 30);
    const barX = cx - barWidth / 2;
    const barY = cy - barHeight / 2;

    // Draw Sci-Fi HUD corner brackets
    const margin = minDim * 0.05;
    const cornerSize = minDim * 0.08;
    ctx.strokeStyle = themeColor;
    ctx.lineWidth = Math.max(2, minDim * 0.005);
    ctx.beginPath();
    
    // Top-Left
    ctx.moveTo(margin + cornerSize, margin);
    ctx.lineTo(margin, margin);
    ctx.lineTo(margin, margin + cornerSize);
    
    // Top-Right
    ctx.moveTo(width - margin - cornerSize, margin);
    ctx.lineTo(width - margin, margin);
    ctx.lineTo(width - margin, margin + cornerSize);
    
    // Bottom-Left
    ctx.moveTo(margin + cornerSize, height - margin);
    ctx.lineTo(margin, height - margin);
    ctx.lineTo(margin, height - margin - cornerSize);
    
    // Bottom-Right
    ctx.moveTo(width - margin - cornerSize, height - margin);
    ctx.lineTo(width - margin, height - margin);
    ctx.lineTo(width - margin, height - margin - cornerSize);
    ctx.stroke();

    // Draw Title Text
    ctx.fillStyle = themeColor;
    ctx.textAlign = "center";
    ctx.textBaseline = "bottom";
    const titleSize = Math.max(minDim * 0.04, 14);
    ctx.font = `bold ${titleSize}px "Courier New", Courier, monospace`;
    ctx.fillText(title.toUpperCase(), cx, barY - height * 0.03);

    // Create Search Bar Path (Rounded Rectangle)
    const radius = barHeight / 2;
    ctx.beginPath();
    ctx.moveTo(barX + radius, barY);
    ctx.lineTo(barX + barWidth - radius, barY);
    ctx.arcTo(barX + barWidth, barY, barX + barWidth, barY + radius, radius);
    ctx.lineTo(barX + barWidth, barY + barHeight - radius);
    ctx.arcTo(barX + barWidth, barY + barHeight, barX + barWidth - radius, barY + barHeight, radius);
    ctx.lineTo(barX + radius, barY + barHeight);
    ctx.arcTo(barX, barY + barHeight, barX, barY + barHeight - radius, radius);
    ctx.lineTo(barX, barY + radius);
    ctx.arcTo(barX, barY, barX + radius, barY, radius);
    ctx.closePath();

    // Fill and Stroke Search Bar
    ctx.fillStyle = "rgba(0, 30, 50, 0.4)";
    ctx.fill();
    ctx.lineWidth = Math.max(2, minDim * 0.003);
    ctx.stroke();

    // Draw Magnifying Glass Icon
    ctx.beginPath();
    const magR = barHeight * 0.22;
    const magX = barX + radius;
    const magY = cy;
    ctx.arc(magX - magR * 0.2, magY - magR * 0.2, magR, 0, Math.PI * 2);
    ctx.moveTo(magX + magR * 0.5, magY + magR * 0.5);
    ctx.lineTo(magX + magR * 1.5, magY + magR * 1.5);
    ctx.stroke();

    // Draw Search Query Text with Blinking Cursor Effect
    ctx.textAlign = "left";
    ctx.textBaseline = "middle";
    const searchSize = Math.max(minDim * 0.03, 12);
    ctx.font = `${searchSize}px "Courier New", Courier, monospace`;
    ctx.fillText(searchQuery + " |", barX + radius * 2.5, cy);

    // Draw Technical HUD details at the bottom
    ctx.font = `${Math.max(minDim * 0.02, 10)}px "Courier New", Courier, monospace`;
    ctx.textAlign = "left";
    const dateStr = new Date().toISOString().split('T')[0];
    ctx.fillText(`DB_DATE: ${dateStr}`, margin, height - margin);
    ctx.textAlign = "right";
    ctx.fillText("SYS_STATUS: ONLINE", width - margin, height - margin);

    // Apply Scanlines over the whole canvas
    if (showScanlines > 0) {
        ctx.fillStyle = "rgba(0, 0, 0, 0.15)";
        for (let i = 0; i < height; i += 4) {
            ctx.fillRect(0, i, width, 2);
        }
    }

    return canvas;
}