Beauty And The Beast Special Extended Edition 1991 Movie Info Tool

function processImage(originalImg, textColor = "#F4D03F", bgColor = "#1A1A24") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set a minimum width to ensure the movie info text remains readable.
    // If the image is smaller, it scales up proportionally.
    const minWidth = 450;
    const scale = originalImg.width < minWidth ? minWidth / originalImg.width : 1;
    
    const finalImgWidth = Math.max(minWidth, originalImg.width);
    const finalImgHeight = originalImg.height * scale;
    
    // Dynamic text sizing relative to the canvas width
    const titleSize = finalImgWidth * 0.06;
    const subTitleSize = finalImgWidth * 0.035;
    const infoSize = finalImgWidth * 0.025;
    
    const lineSpacing = finalImgWidth * 0.015;
    const padding = finalImgWidth * 0.06;
    
    // Calculate the complete banner space needed at the bottom
    const bannerHeight = titleSize + subTitleSize + infoSize + (lineSpacing * 2) + (padding * 2);
    
    canvas.width = finalImgWidth;
    canvas.height = finalImgHeight + bannerHeight;
    
    // Background color for the canvas (also helps if the original image has a transparent background)
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Draw the image, scaled if the original was smaller than the minimum width
    ctx.drawImage(originalImg, 0, 0, finalImgWidth, finalImgHeight);
    
    // Add an elegant solid separator line between the image and the text banner
    ctx.strokeStyle = textColor;
    ctx.lineWidth = Math.max(2, finalImgWidth * 0.005);
    ctx.beginPath();
    ctx.moveTo(0, finalImgHeight);
    ctx.lineTo(canvas.width, finalImgHeight);
    ctx.stroke();
    
    // Text rendering setup
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    const textX = canvas.width / 2;
    let currentY = finalImgHeight + padding + (titleSize / 2);
    
    // 1. Movie Title
    ctx.fillStyle = textColor;
    ctx.font = `bold ${titleSize}px Georgia, serif`;
    ctx.fillText("Beauty and the Beast", textX, currentY);
    
    // 2. Movie Edition details
    currentY += (titleSize / 2) + lineSpacing + (subTitleSize / 2);
    ctx.fillStyle = "#EAEAEA";
    ctx.font = `italic ${subTitleSize}px Georgia, serif`;
    ctx.fillText("Special Extended Edition", textX, currentY);
    
    // 3. Extracted Specs from Description
    currentY += (subTitleSize / 2) + lineSpacing + (infoSize / 2);
    ctx.fillStyle = "#B0B0B0";
    ctx.font = `${infoSize}px Tahoma, Arial, sans-serif`;
    ctx.fillText("(1991) G   •   1h 31min45sec", textX, currentY);
    
    return canvas;
}