Movie Database Creator Image Tool

function processImage(originalImg, movieTitle = 'Cinematic Masterpiece', director = 'Famous Director', year = '2023', genre = 'Action / Drama', rating = '8.5') {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Determine dimensions
    // The image retains its original width, and we append a "Movie Database Card" footer below it.
    canvas.width = originalImg.width;
    
    // Proportional footer height to look balanced, with a minimum fallback
    const footerHeight = Math.max(120, canvas.width * 0.25);
    canvas.height = originalImg.height + footerHeight;

    // 1. Draw the top image
    ctx.drawImage(originalImg, 0, 0);

    // 2. Draw the dark footer background (IMDb style)
    ctx.fillStyle = '#1A1A1A';
    ctx.fillRect(0, originalImg.height, canvas.width, footerHeight);

    // 3. Draw a cinematic golden accent line separating the image and the database bar
    const lineHeight = Math.max(3, footerHeight * 0.03);
    ctx.fillStyle = '#F5C518';
    ctx.fillRect(0, originalImg.height, canvas.width, lineHeight);

    // 4. Setup text rendering calculations
    const padX = canvas.width * 0.04;
    
    // Y-positions for the three lines of text (Title, Year/Genre, Director)
    const titleY = originalImg.height + footerHeight * 0.35;
    const metaY = originalImg.height + footerHeight * 0.65;
    const dirY = originalImg.height + footerHeight * 0.88;

    // Font sizes based on footer height
    const titleFontSize = footerHeight * 0.22;
    const metaFontSize = footerHeight * 0.12;

    ctx.textBaseline = 'middle';

    // 5. Draw Rating on the right side
    // We draw rating first so we know how much to restrict the title width
    ctx.font = `bold ${titleFontSize}px Arial, sans-serif`;
    const ratingTextWidth = ctx.measureText(rating).width;
    const starRadius = titleFontSize * 0.6;
    const starPad = starRadius * 1.5;
    
    ctx.textAlign = 'right';
    ctx.fillStyle = '#FFFFFF';
    ctx.fillText(rating, canvas.width - padX, titleY);

    // Draw the rating star
    const starX = canvas.width - padX - ratingTextWidth - starPad;
    drawStar(ctx, starX, titleY, 5, starRadius, starRadius * 0.4);

    // 6. Draw Movie Title
    ctx.textAlign = 'left';
    ctx.fillStyle = '#FFFFFF';
    const maxTitleWidth = starX - starRadius - padX * 2; // Keep it from overlapping the rating
    ctx.fillText(movieTitle, padX, titleY, maxTitleWidth);

    // 7. Draw Year & Genre
    ctx.font = `${metaFontSize}px Arial, sans-serif`;
    ctx.fillStyle = '#AAAAAA';
    ctx.fillText(`${year}   •   ${genre}`, padX, metaY);

    // 8. Draw Director
    ctx.fillStyle = '#DDDDDD';
    ctx.fillText(`Director: ${director}`, padX, dirY);

    return canvas;

    // Helper function to draw a 5-pointed star
    function drawStar(context, cx, cy, spikes, outerRadius, innerRadius) {
        let rot = Math.PI / 2 * 3;
        let x = cx;
        let y = cy;
        let step = Math.PI / spikes;

        context.beginPath();
        context.moveTo(cx, cy - outerRadius);
        for (let i = 0; i < spikes; i++) {
            x = cx + Math.cos(rot) * outerRadius;
            y = cy + Math.sin(rot) * outerRadius;
            context.lineTo(x, y);
            rot += step;

            x = cx + Math.cos(rot) * innerRadius;
            y = cy + Math.sin(rot) * innerRadius;
            context.lineTo(x, y);
            rot += step;
        }
        context.lineTo(cx, cy - outerRadius);
        context.closePath();
        
        context.fillStyle = '#F5C518';
        context.fill();
    }
}