Movie Project Details Generator With Studio And Year Information

function processImage(originalImg, title = "UNTITLED PROJECT", projectId = "PRJ-001", studio = "UNKNOWN STUDIO", year = "2024") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Calculate canvas dimensions based on the original image
    const imgW = originalImg.width;
    const imgH = originalImg.height;
    
    // Scale details proportionally to image width, with safe minimums
    const padding = Math.max(15, imgW * 0.05);
    const borderHeight = Math.max(15, imgW * 0.035); 
    const titleSize = Math.max(18, imgW * 0.06);
    const detailSize = Math.max(14, imgW * 0.04);
    
    // Height of the new bottom panel
    const panelH = borderHeight + padding * 2 + titleSize * 1.5 + detailSize * 3;
    
    canvas.width = imgW;
    canvas.height = imgH + panelH;
    
    // 1. Draw the original image at the top
    ctx.drawImage(originalImg, 0, 0, imgW, imgH);
    
    // 2. Draw details panel background
    ctx.fillStyle = '#151515';
    ctx.fillRect(0, imgH, imgW, panelH);
    
    // 3. Draw clapperboard style stripes at the top boundary of the panel
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, imgH, imgW, borderHeight);
    
    ctx.fillStyle = '#000000';
    const numStripes = 12;
    const stripeW = imgW / numStripes;
    const slantOffset = stripeW * 0.4; // controls the leaning angle of the stripes
    
    for (let i = -1; i <= numStripes; i++) {
        if (Math.abs(i) % 2 === 0) {
            ctx.beginPath();
            // Top left
            ctx.moveTo(i * stripeW, imgH);
            // Top right
            ctx.lineTo((i + 1) * stripeW, imgH);
            // Bottom right
            ctx.lineTo((i + 1) * stripeW - slantOffset, imgH + borderHeight);
            // Bottom left
            ctx.lineTo(i * stripeW - slantOffset, imgH + borderHeight);
            ctx.fill();
        }
    }
    
    // Draw a thin separator line below the clapperboard border
    ctx.fillStyle = '#444444';
    ctx.fillRect(0, imgH + borderHeight, imgW, 2);
    
    // 4. Set up text drawing features
    ctx.textBaseline = 'top';
    const maxTextWidth = imgW - padding * 2;
    
    function drawText(text, x, y, weight, family, defaultSize, maxW) {
        let size = defaultSize;
        ctx.font = `${weight} ${size}px ${family}`;
        let measured = ctx.measureText(text).width;
        
        // Dynamically shrink font size if text exceeds maximum line width width
        while (measured > maxW && size > 8) {
            size -= 0.5;
            ctx.font = `${weight} ${size}px ${family}`;
            measured = ctx.measureText(text).width;
        }
        ctx.fillText(text, x, y);
    }
    
    let currentY = imgH + borderHeight + padding;
    
    // 5. Draw Title
    ctx.fillStyle = '#ffffff';
    drawText(`TITLE: ${title}`, padding, currentY, "bold", "Arial, sans-serif", titleSize, maxTextWidth);
    currentY += titleSize * 1.5;
    
    // 6. Draw Project ID and Year on the same line
    ctx.fillStyle = '#bbbbbb';
    drawText(`PROJECT ID: ${projectId}   |   YEAR: ${year}`, padding, currentY, "normal", "'Courier New', Courier, monospace", detailSize, maxTextWidth);
    currentY += detailSize * 1.6;
    
    // 7. Draw Studio
    drawText(`STUDIO: ${studio}`, padding, currentY, "normal", "'Courier New', Courier, monospace", detailSize, maxTextWidth);

    return canvas;
}