Image Race Of The Century Creator

function processImage(originalImg, title = "ГОНКА ВЕКА", subtitle = "СТАВКИ СДЕЛАНЫ!", challengerName = "ПРЕТЕНДЕНТ", opponentName = "УЛИТКА", opponentIcon = "🐌") {
    // Create canvas
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    
    // Set canvas dimensions
    const width = 800;
    const height = 640;
    canvas.width = width;
    canvas.height = height;

    // 1. Draw solid dark background
    ctx.fillStyle = "#2a2a2a";
    ctx.fillRect(0, 0, width, height);

    // 2. Helper function to draw racing checkerboard patterns
    const drawChecker = (startY, h) => {
        const size = 40;
        const rows = Math.ceil(h / size);
        const cols = Math.ceil(width / size);
        for(let r = 0; r < rows; r++) {
            for(let c = 0; c < cols; c++) {
                ctx.fillStyle = (r + c) % 2 === 0 ? "#151515" : "#e0e0e0";
                ctx.fillRect(c * size, startY + r * size, size, size);
            }
        }
    };

    // Draw top and bottom checkerboards
    drawChecker(0, 120);
    drawChecker(520, 120);

    // 3. Draw Top Banner ("ГОНКА ВЕКА")
    ctx.fillStyle = "rgba(220, 20, 20, 0.95)";
    ctx.fillRect(0, 30, width, 60);

    ctx.font = "bold 48px Impact, 'Arial Black', sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillStyle = "#FFD700"; // Gold color
    ctx.strokeStyle = "black";
    ctx.lineWidth = 4;
    ctx.strokeText(title, width / 2, 60 + 3);
    ctx.fillText(title, width / 2, 60 + 3);

    // 4. Draw Bottom Banner (Subtitle)
    ctx.fillStyle = "rgba(220, 20, 20, 0.95)";
    ctx.fillRect(0, 550, width, 60);

    ctx.font = "bold 36px Impact, 'Arial Black', sans-serif";
    ctx.fillStyle = "white";
    ctx.strokeText(subtitle, width / 2, 580 + 3);
    ctx.fillText(subtitle, width / 2, 580 + 3);

    // 5. Draw "VS" in the center
    ctx.font = "italic bold 64px Impact, 'Arial Black', sans-serif";
    ctx.fillStyle = "white";
    ctx.strokeStyle = "#dd1414";
    ctx.lineWidth = 6;
    ctx.strokeText("VS", width / 2, 320);
    ctx.fillText("VS", width / 2, 320);

    // Layout configuration for participant boxes
    const boxSize = 280;
    const leftX = 60;
    const rightX = 460;
    const topY = 170;

    // 6. Draw Left Container (User Image)
    // Add shadow
    ctx.shadowColor = "rgba(0, 0, 0, 0.8)";
    ctx.shadowBlur = 15;
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(leftX, topY, boxSize, boxSize);
    ctx.shadowBlur = 0; // Reset shadow

    // Cropping original image to fit the square using object-fit: cover logic
    const imgRatio = originalImg.width / originalImg.height;
    let srcW = originalImg.width;
    let srcH = originalImg.height;
    let srcX = 0;
    let srcY = 0;

    if (imgRatio > 1) {
        srcW = originalImg.height;
        srcX = (originalImg.width - srcW) / 2;
    } else {
        srcH = originalImg.width;
        srcY = (originalImg.height - srcH) / 2;
    }
    
    // Draw the image
    ctx.drawImage(originalImg, srcX, srcY, srcW, srcH, leftX, topY, boxSize, boxSize);

    // White border for Left
    ctx.strokeStyle = "white";
    ctx.lineWidth = 6;
    ctx.strokeRect(leftX, topY, boxSize, boxSize);

    // Challenger Label
    ctx.font = "bold 26px 'Arial Black', Arial, sans-serif";
    ctx.fillStyle = "white";
    ctx.lineWidth = 4;
    ctx.strokeStyle = "black";
    ctx.strokeText(challengerName, leftX + boxSize / 2, topY + boxSize + 38);
    ctx.fillText(challengerName, leftX + boxSize / 2, topY + boxSize + 38);


    // 7. Draw Right Container (Opponent)
    // Add shadow
    ctx.shadowColor = "rgba(0, 0, 0, 0.8)";
    ctx.shadowBlur = 15;
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(rightX, topY, boxSize, boxSize);
    ctx.shadowBlur = 0; // Reset shadow

    // Inner greyish background for opponent icon
    ctx.fillStyle = "#f0f0f0";
    ctx.fillRect(rightX + 3, topY + 3, boxSize - 6, boxSize - 6);

    // Draw Emoji / Icon for Opponent
    ctx.font = "140px Arial, sans-serif";
    ctx.fillStyle = "black";
    // Adjust Y slightly to account for font baselines centering
    ctx.fillText(opponentIcon, rightX + boxSize / 2, topY + boxSize / 2 + 50);

    // White border for Right
    ctx.strokeStyle = "white";
    ctx.lineWidth = 6;
    ctx.strokeRect(rightX, topY, boxSize, boxSize);

    // Opponent Label
    ctx.font = "bold 26px 'Arial Black', Arial, sans-serif";
    ctx.fillStyle = "white";
    ctx.lineWidth = 4;
    ctx.strokeStyle = "black";
    ctx.strokeText(opponentName, rightX + boxSize / 2, topY + boxSize + 38);
    ctx.fillText(opponentName, rightX + boxSize / 2, topY + boxSize + 38);

    return canvas;
}