True Friends Image Generator

async function processImage(originalImg, mainText = "Настоящие друзья", secondaryText = "Всегда рядом!", style = "polaroid") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Target inner width for the image to maintain consistent resolution limits
    const innerW = 800;
    const scale = innerW / originalImg.width;
    const innerH = originalImg.height * scale;

    const currentStyle = String(style).toLowerCase();
    const isDemotivator = currentStyle === 'demotivator';

    // Load external Google Fonts if Polaroid style is chosen 
    // to give it a nice Cyrillic-compatible handwritten look
    if (!isDemotivator) {
        if (!document.getElementById('true-friends-font-caveat')) {
            const link = document.createElement('link');
            link.id = 'true-friends-font-caveat';
            link.href = 'https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap';
            link.rel = 'stylesheet';
            document.head.appendChild(link);
        }
        
        // Wait briefly for the CSS to append and register
        await new Promise(r => setTimeout(r, 50));
        
        try {
            if (document.fonts) {
                await document.fonts.load('700 54px "Caveat"');
                await document.fonts.load('400 36px "Caveat"');
            }
        } catch (err) {
            console.warn("Font loading fallback to standard cursive.", err);
        }
    }

    if (isDemotivator) {
        // Classic "Demotivator" format parameters
        const marginX = 50;
        const marginTop = 50;
        const marginBottom = 200;
        
        canvas.width = innerW + marginX * 2;
        canvas.height = innerH + marginTop + marginBottom;
        
        // Solid black background
        ctx.fillStyle = '#000000';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // Draw image
        ctx.drawImage(originalImg, marginX, marginTop, innerW, innerH);
        
        // Draw inner white border outline
        ctx.strokeStyle = '#FFFFFF';
        ctx.lineWidth = 2;
        ctx.strokeRect(marginX - 10, marginTop - 10, innerW + 20, innerH + 20);
        
        // Render main text (usually Times New Roman)
        ctx.fillStyle = '#FFFFFF';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.font = 'normal 56px "Times New Roman", Times, serif';
        ctx.fillText(String(mainText).toUpperCase(), canvas.width / 2, marginTop + innerH + 45, innerW);
        
        // Render secondary text 
        ctx.fillStyle = '#CCCCCC';
        ctx.font = 'normal 28px Arial, Helvetica, sans-serif';
        ctx.fillText(String(secondaryText), canvas.width / 2, marginTop + innerH + 120, innerW);
        
    } else {
        // Modern "Polaroid" memory format parameters
        const padX = 30;
        const padTop = 30;
        const padBottom = 160;
        const shadowMargin = 60;
        
        const polW = innerW + padX * 2;
        const polH = innerH + padTop + padBottom;
        
        canvas.width = polW + shadowMargin * 2;
        canvas.height = polH + shadowMargin * 2;
        
        // Aesthetic backdrop color
        ctx.fillStyle = '#e8e4e1';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // Configure drop shadow
        ctx.shadowColor = 'rgba(0, 0, 0, 0.25)';
        ctx.shadowBlur = 20;
        ctx.shadowOffsetX = 5;
        ctx.shadowOffsetY = 15;
        
        // Draw the white polaroid paper base
        ctx.fillStyle = '#FFFFFF';
        ctx.fillRect(shadowMargin, shadowMargin, polW, polH);
        
        // Important: reset shadow before drawing other elements
        ctx.shadowColor = 'transparent';
        
        // Draw the user image
        ctx.drawImage(originalImg, shadowMargin + padX, shadowMargin + padTop, innerW, innerH);
        
        // Draw handwritten-style texts
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        
        const mainY = shadowMargin + padTop + innerH + 30;
        
        ctx.fillStyle = '#1a1a1a';
        ctx.font = '700 54px "Caveat", cursive, sans-serif';
        ctx.fillText(String(mainText), shadowMargin + polW / 2, mainY, innerW);
        
        ctx.fillStyle = '#4a4a4a';
        ctx.font = '400 36px "Caveat", cursive, sans-serif';
        ctx.fillText(String(secondaryText), shadowMargin + polW / 2, mainY + 65, innerW);
    }

    return canvas;
}