Vaugrad Friendship Festival Image Viewer

function processImage(originalImg, frameColor = '#2F80ED', textColor = '#FFFFFF', bannerText = 'Фестиваль дружбы в Вауграде') {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Calculate proportional dimensions to ensure it looks good with any image size
    const minDim = Math.min(originalImg.width, originalImg.height);
    
    // Padding proportional to dimensions (acting as a commemorative polaroid/poster frame)
    const paddingSides = Math.max(20, originalImg.width * 0.08); 
    const paddingTop = Math.max(40, minDim * 0.12);
    const paddingBottom = Math.max(70, minDim * 0.25);

    // Canvas dimensions
    canvas.width = originalImg.width + paddingSides * 2;
    canvas.height = originalImg.height + paddingTop + paddingBottom;

    // Draw background/frame
    ctx.fillStyle = frameColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Draw the original image in the center
    ctx.drawImage(originalImg, paddingSides, paddingTop, originalImg.width, originalImg.height);

    // Add a decorative inner border for the image
    const borderWidth = Math.max(2, minDim * 0.005);
    ctx.strokeStyle = '#ffffff';
    ctx.lineWidth = borderWidth;
    ctx.strokeRect(paddingSides, paddingTop, originalImg.width, originalImg.height);
    
    // Draw the festive garland string
    ctx.beginPath();
    const startX = paddingSides;
    const startY = paddingTop / 2;
    const endX = canvas.width - paddingSides;
    const endY = paddingTop / 2;
    const cpX = canvas.width / 2;
    const cpY = paddingTop * 0.8; // The dip in the garland
    
    ctx.moveTo(startX, startY);
    ctx.quadraticCurveTo(cpX, cpY, endX, endY);
    ctx.strokeStyle = '#FFFFFF';
    ctx.lineWidth = Math.max(1, minDim * 0.005);
    ctx.stroke();

    // Draw the festival flags (bunting) along the string
    const numFlags = 9;
    const flagColors = ['#E74C3C', '#F1C40F', '#2ECC71', '#9B59B6', '#E67E22', '#1ABC9C'];
    
    for (let i = 0; i < numFlags; i++) {
        // Calculate curve position using Bezier logic
        const t = (i + 0.5) / numFlags; 
        const x = Math.pow(1 - t, 2) * startX + 2 * (1 - t) * t * cpX + Math.pow(t, 2) * endX;
        const y = Math.pow(1 - t, 2) * startY + 2 * (1 - t) * t * cpY + Math.pow(t, 2) * endY;

        ctx.fillStyle = flagColors[i % flagColors.length];
        
        const flagWidth = Math.max(12, minDim * 0.035);
        const flagHeight = Math.max(16, minDim * 0.05);
        
        ctx.beginPath();
        ctx.moveTo(x - flagWidth / 2, y);
        ctx.lineTo(x + flagWidth / 2, y);
        ctx.lineTo(x, y + flagHeight);
        ctx.closePath();
        ctx.fill();
    }

    // Prepare text styling at the bottom
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    let fontSize = Math.max(24, minDim * 0.08);
    const fontFaces = '"Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif';
    ctx.font = `bold ${fontSize}px ${fontFaces}`;
    
    // Scale text down if it's wider than the available space
    const maxTextWidth = canvas.width - paddingSides * 3;
    while (ctx.measureText(bannerText).width > maxTextWidth && fontSize > 10) {
        fontSize -= 2;
        ctx.font = `bold ${fontSize}px ${fontFaces}`;
    }

    const textY = canvas.height - paddingBottom * 0.6;
    ctx.fillText(bannerText, canvas.width / 2, textY);

    // Decorative festival stars next to the text
    const drawStar = (cx, cy, spikes, outerRadius, innerRadius, color) => {
        let rot = Math.PI / 2 * 3;
        let x = cx;
        let y = cy;
        let step = Math.PI / spikes;
        ctx.beginPath();
        ctx.moveTo(cx, cy - outerRadius);
        for (let i = 0; i < spikes; i++) {
            x = cx + Math.cos(rot) * outerRadius;
            y = cy + Math.sin(rot) * outerRadius;
            ctx.lineTo(x, y);
            rot += step;
            x = cx + Math.cos(rot) * innerRadius;
            y = cy + Math.sin(rot) * innerRadius;
            ctx.lineTo(x, y);
            rot += step;
        }
        ctx.lineTo(cx, cy - outerRadius);
        ctx.closePath();
        ctx.fillStyle = color;
        ctx.fill();
    };

    const starOuter = Math.max(8, minDim * 0.025);
    const starInner = Math.max(4, minDim * 0.012);
    
    drawStar(paddingSides + starOuter, textY, 5, starOuter, starInner, '#F1C40F');
    drawStar(canvas.width - paddingSides - starOuter, textY, 5, starOuter, starInner, '#F1C40F');

    // Add translation/subtitle text underneath
    const subText = 'Vaugrad Friendship Festival';
    ctx.font = `italic ${Math.max(12, fontSize * 0.4)}px ${fontFaces}`;
    ctx.fillStyle = 'rgba(255, 255, 255, 0.85)';
    ctx.fillText(subText, canvas.width / 2, canvas.height - paddingBottom * 0.25);

    return canvas;
}