Superpapa Image Generator

async function processImage(
    originalImg, 
    text = "СУПЕРПАПА", 
    position = "bottom", 
    drawShield = "true", 
    primaryColor = "#ffcc00", 
    secondaryColor = "#cc0000"
) {
    // Attempt to dynamically load a neat, superhero-style font that supports Cyrillic
    const fontName = 'Russo One';
    try {
        const fontUrl = 'https://fonts.gstatic.com/s/russoone/v14/Z9XVDmSpVC9G7VE6YFvnZlV8.woff2';
        const font = new FontFace(fontName, `url(${fontUrl})`);
        await font.load();
        document.fonts.add(font);
    } catch (e) {
        console.warn("Could not load custom font, falling back to system fonts.", e);
    }

    // Set up canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const w = originalImg.width;
    const h = originalImg.height;
    
    canvas.width = w;
    canvas.height = h;

    // Draw the original base image
    ctx.drawImage(originalImg, 0, 0, w, h);

    // Calculate font size relative to image width
    const fontSize = Math.max(24, Math.floor(w / 8));
    ctx.font = `${fontSize}px "${fontName}", Impact, "Arial Black", sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    const textMetrics = ctx.measureText(text);
    const textWidth = textMetrics.width;
    
    // Positioning
    const x = w / 2;
    let y = position.toLowerCase() === 'top' ? fontSize * 1.5 : h - fontSize * 1.5;

    // Draw Superman-like shield background if requested
    if (drawShield === "true") {
        const shieldW = textWidth * 1.4;
        const shieldH = fontSize * 3;
        const sy = y - fontSize * 0.1;

        ctx.shadowColor = 'rgba(0, 0, 0, 0.6)';
        ctx.shadowBlur = Math.max(5, fontSize / 5);
        ctx.shadowOffsetX = Math.max(3, fontSize / 15);
        ctx.shadowOffsetY = Math.max(3, fontSize / 15);

        // Draw diamond/shield pentagon shape
        ctx.beginPath();
        ctx.moveTo(x - shieldW * 0.45, sy - shieldH * 0.4);
        ctx.lineTo(x + shieldW * 0.45, sy - shieldH * 0.4);
        ctx.lineTo(x + shieldW * 0.5,  sy - shieldH * 0.05);
        ctx.lineTo(x,                  sy + shieldH * 0.5);
        ctx.lineTo(x - shieldW * 0.5,  sy - shieldH * 0.05);
        ctx.closePath();

        // Fill with primary color (Yellow)
        ctx.fillStyle = primaryColor;
        ctx.fill();

        // Stroke with secondary color (Red)
        ctx.shadowColor = 'transparent'; // prevent double shadowing on the stroke
        ctx.lineWidth = Math.max(4, shieldH / 20);
        ctx.lineJoin = "round";
        ctx.strokeStyle = secondaryColor;
        ctx.stroke();
    }

    // Draw stylized text overlay
    if (drawShield === "true") {
        // If inside shield, text is purely the secondary color (Classic Superman red text on yellow)
        ctx.fillStyle = secondaryColor;
        ctx.fillText(text, x, y);
    } else {
        // If no shield, add a nice drop-shadow and stroke to make text stand out against the raw image
        ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
        ctx.shadowBlur = Math.max(4, fontSize / 10);
        ctx.shadowOffsetX = Math.max(2, fontSize / 20);
        ctx.shadowOffsetY = Math.max(2, fontSize / 20);
        
        ctx.fillStyle = primaryColor;
        ctx.lineWidth = Math.max(2, fontSize / 12);
        ctx.lineJoin = "round";
        ctx.strokeStyle = secondaryColor;
        
        // Draw Outline then fill
        ctx.strokeText(text, x, y);
        
        ctx.shadowColor = 'transparent';
        ctx.fillText(text, x, y);
    }

    return canvas;
}