Image Talent Showcase Creator

function processImage(originalImg, title = "ТАЛАНТ", subtitle = "Outstanding Performance", themeColor = "#FFD700", backgroundColor = "#1A1A1A") {
    // Basic setup
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Make a portrait poster dimension
    const CANVAS_WIDTH = 800;
    const CANVAS_HEIGHT = 1000;
    canvas.width = CANVAS_WIDTH;
    canvas.height = CANVAS_HEIGHT;

    // Helper to convert hex to RGB for the gradient
    function hexToRgb(hex) {
        let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
        hex = hex.replace(shorthandRegex, function(m, r, g, b) {
            return r + r + g + g + b + b;
        });
        let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : { r: 255, g: 215, b: 0 }; // Fallback to Gold
    }

    // 1. Draw solid background
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

    // 2. Draw a spotlight/glow effect emanating from the center where the image will be
    const rgbTheme = hexToRgb(themeColor);
    const gradient = ctx.createRadialGradient(
        CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 - 100, 50, 
        CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 - 100, 600
    );
    gradient.addColorStop(0, `rgba(${rgbTheme.r}, ${rgbTheme.g}, ${rgbTheme.b}, 0.5)`);
    gradient.addColorStop(1, `rgba(${rgbTheme.r}, ${rgbTheme.g}, ${rgbTheme.b}, 0)`);
    
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

    // 3. Top Header Text
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.font = "bold 18px 'Arial', sans-serif";
    ctx.fillStyle = themeColor;
    // Simulating letter spacing by adding spaces
    ctx.fillText("I M A G E   T A L E N T   S H O W C A S E", CANVAS_WIDTH / 2, 70);

    // 4. Calculate best fit dimension for the showcase image inside its area
    const maxImgWidth = 600;
    const maxImgHeight = 550;
    let imgWidth = originalImg.width;
    let imgHeight = originalImg.height;

    const ratio = Math.min(maxImgWidth / imgWidth, maxImgHeight / imgHeight);
    imgWidth *= ratio;
    imgHeight *= ratio;

    const imgX = (CANVAS_WIDTH - imgWidth) / 2;
    const imgY = 140 + (maxImgHeight - imgHeight) / 2; 

    // 5. Draw Image Frame with shadow
    ctx.save();
    ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
    ctx.shadowBlur = 30;
    ctx.shadowOffsetY = 15;
    ctx.shadowOffsetX = 0;

    const framePad = 18;
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(imgX - framePad, imgY - framePad, imgWidth + framePad * 2, imgHeight + framePad * 2);
    ctx.restore();

    // 6. Draw Elegant inner border
    ctx.strokeStyle = themeColor;
    ctx.lineWidth = 2;
    ctx.strokeRect(imgX - framePad + 6, imgY - framePad + 6, imgWidth + framePad * 2 - 12, imgHeight + framePad * 2 - 12);

    // 7. Draw the actual image
    ctx.drawImage(originalImg, imgX, imgY, imgWidth, imgHeight);

    // 8. Main Title (Talent / Талант)
    const titleY = CANVAS_HEIGHT - 170;
    ctx.font = "bold 65px 'Georgia', serif";
    ctx.fillStyle = themeColor;
    // Add text shadow
    ctx.shadowColor = 'rgba(0, 0, 0, 0.9)';
    ctx.shadowBlur = 8;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 3;
    
    const displayTitle = title.toUpperCase();
    ctx.fillText(displayTitle, CANVAS_WIDTH / 2, titleY);

    // 9. Decorative lines on either side of the title
    ctx.shadowColor = "transparent"; // Reset shadow for lines
    const titleWidth = ctx.measureText(displayTitle).width;
    const lineMargin = 30;
    const lineLength = (CANVAS_WIDTH - titleWidth) / 2 - 60; // Leaves 60px outer margin

    if (lineLength > 20) {
        ctx.strokeStyle = themeColor;
        ctx.lineWidth = 3;

        // Left Line
        ctx.beginPath();
        ctx.moveTo(60, titleY);
        ctx.lineTo(60 + lineLength - lineMargin, titleY);
        ctx.stroke();

        // Right Line
        ctx.beginPath();
        ctx.moveTo(CANVAS_WIDTH - 60 - lineLength + lineMargin, titleY);
        ctx.lineTo(CANVAS_WIDTH - 60, titleY);
        ctx.stroke();
    }

    // 10. Subtitle
    ctx.font = "italic 28px 'Georgia', serif";
    ctx.fillStyle = "#E0E0E0";
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
    ctx.shadowBlur = 4;
    ctx.shadowOffsetX = 1;
    ctx.shadowOffsetY = 1;
    ctx.fillText(subtitle, CANVAS_WIDTH / 2, titleY + 60);

    return canvas;
}