Image Old-Time Cinema Poster Frame Creator

function processImage(
    originalImg,
    frameColor = "#50301F", // Dark Brown for outer frame
    paperColor = "#FDF5E6", // Old Lace for content background
    textColor = "#2F1E12", // Very Dark Brown for text
    headerText = "NOW SHOWING",
    footerText = "",
    fontFamily = "Impact, 'Arial Black', sans-serif",
    outerBorderWidth = 40,
    textBandHeight = 50, // Height for each text band if text is present
    imagePadding = 15,
    cornerRadius = 10, // For the paper area corners
    imageBorderColor = "#A08060", // Muted mid-tone for image border
    imageBorderWidth = 2      // Width of the image border
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Validate and clean input parameters
    outerBorderWidth = Math.max(0, outerBorderWidth);
    textBandHeight = Math.max(0, textBandHeight);
    imagePadding = Math.max(0, imagePadding);
    imageBorderWidth = Math.max(0, imageBorderWidth);
    let actualCornerRadius = Math.max(0, cornerRadius);

    // Calculate effective image dimensions including its border
    const effectiveImageWidth = originalImg.width + (imageBorderWidth > 0 ? 2 * imageBorderWidth : 0);
    const effectiveImageHeight = originalImg.height + (imageBorderWidth > 0 ? 2 * imageBorderWidth : 0);

    // Determine actual heights for header/footer based on text presence
    const actualHeaderHeight = (headerText && headerText.trim() !== "") ? textBandHeight : 0;
    const actualFooterHeight = (footerText && footerText.trim() !== "") ? textBandHeight : 0;

    // Calculate canvas dimensions
    canvas.width = effectiveImageWidth + 2 * (outerBorderWidth + imagePadding);
    canvas.height = effectiveImageHeight + 2 * (outerBorderWidth + imagePadding) + actualHeaderHeight + actualFooterHeight;

    // --- Drawing starts ---

    // 1. Fill entire canvas with frameColor (this forms the outer border)
    ctx.fillStyle = frameColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 2. Draw the "paper" area
    const paperX = outerBorderWidth;
    const paperY = outerBorderWidth;
    const paperWidth = canvas.width - 2 * outerBorderWidth;
    const paperHeight = canvas.height - 2 * outerBorderWidth;

    ctx.fillStyle = paperColor;
    if (actualCornerRadius > 0 && paperWidth > 0 && paperHeight > 0) {
        // Clamp cornerRadius to be at most half of the smallest dimension of the paper area
        actualCornerRadius = Math.min(actualCornerRadius, paperWidth / 2, paperHeight / 2);
        
        ctx.beginPath();
        ctx.moveTo(paperX + actualCornerRadius, paperY);
        ctx.lineTo(paperX + paperWidth - actualCornerRadius, paperY);
        ctx.quadraticCurveTo(paperX + paperWidth, paperY, paperX + paperWidth, paperY + actualCornerRadius);
        ctx.lineTo(paperX + paperWidth, paperY + paperHeight - actualCornerRadius);
        ctx.quadraticCurveTo(paperX + paperWidth, paperY + paperHeight, paperX + paperWidth - actualCornerRadius, paperY + paperHeight);
        ctx.lineTo(paperX + actualCornerRadius, paperY + paperHeight);
        ctx.quadraticCurveTo(paperX, paperY + paperHeight, paperX, paperY + paperHeight - actualCornerRadius);
        ctx.lineTo(paperX, paperY + actualCornerRadius);
        ctx.quadraticCurveTo(paperX, paperY, paperX + actualCornerRadius, paperY);
        ctx.closePath();
        ctx.fill();
    } else {
        ctx.fillRect(paperX, paperY, paperWidth, paperHeight);
    }

    // 3. Draw Header Text (if any)
    if (actualHeaderHeight > 0) {
        const fontSize = actualHeaderHeight * 0.6; // Adjust multiplier for aesthetics
        ctx.font = `${fontSize}px ${fontFamily}`;
        ctx.fillStyle = textColor;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        const textX = canvas.width / 2;
        const textY_header = outerBorderWidth + actualHeaderHeight / 2;
        ctx.fillText(headerText.toUpperCase(), textX, textY_header);
    }

    // 4. Draw Image and its border (if any)
    const imageBlockX = outerBorderWidth + imagePadding;
    const imageBlockY = outerBorderWidth + actualHeaderHeight + imagePadding;

    if (imageBorderWidth > 0) {
        ctx.fillStyle = imageBorderColor;
        ctx.fillRect(imageBlockX, imageBlockY, effectiveImageWidth, effectiveImageHeight);
        
        ctx.drawImage(originalImg,
                      imageBlockX + imageBorderWidth,
                      imageBlockY + imageBorderWidth,
                      originalImg.width,
                      originalImg.height);
    } else {
        ctx.drawImage(originalImg,
                      imageBlockX,
                      imageBlockY,
                      originalImg.width,
                      originalImg.height);
    }

    // 5. Draw Footer Text (if any)
    if (actualFooterHeight > 0) {
        const fontSize = actualFooterHeight * 0.6; // Adjust multiplier
        ctx.font = `${fontSize}px ${fontFamily}`;
        ctx.fillStyle = textColor;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        const textX = canvas.width / 2;
        // Position footer text at the bottom of the paper area, inside the outerBorderWidth
        const textY_footer = canvas.height - outerBorderWidth - actualFooterHeight / 2;
        ctx.fillText(footerText.toUpperCase(), textX, textY_footer);
    }

    return canvas;
}