Image Trading Card Frame Creator

function processImage(
    originalImg,
    cardName = "Hero Image",
    nameTextColor = "#FFFFFF",
    nameFontFamily = "Impact",
    nameFontSizeRatio = 0.07,
    nameFontWeight = "bold",
    nameBackgroundColor = "#4A4A70", // Dark slate blue
    cardType = "Legendary Creature",
    typeTextColor = "#000000",
    typeFontFamily = "Georgia",
    typeFontSizeRatio = 0.045,
    typeFontWeight = "normal",
    typeBackgroundColor = "#D2B48C", // Tan
    imageBorderColor = "#C0C0C0", // Silver
    imageBorderThicknessRatio = 0.02,
    outerFrameColor = "#303030", // Dark gray
    outerFrameThicknessRatio = 0.025,
    paddingRatio = 0.02 // Padding between elements and text padding in bars
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const baseW = originalImg.width;
    const baseH = originalImg.height;

    // Calculate dynamic sizes based on ratios and base image width
    // Use Math.max to ensure minimum sensible sizes, especially for small images
    const nameFontSize = Math.max(10, baseW * nameFontSizeRatio);
    const typeFontSize = Math.max(10, baseW * typeFontSizeRatio);
    
    const imageBorderThickness = Math.max(1, baseW * imageBorderThicknessRatio);
    const outerFrameThickness = Math.max(1, baseW * outerFrameThicknessRatio);
    // internalPadding is used for spacing between card elements and for padding text within bars
    const internalPadding = Math.max(1, baseW * paddingRatio); 

    // Calculate heights of text bars, including internal padding for text
    const nameBarHeight = nameFontSize + internalPadding * 2;
    const typeBarHeight = typeFontSize + internalPadding * 2;

    // Calculate final canvas dimensions
    // Canvas width is determined by the original image width, its border, and the outer frame.
    const canvasWidth = baseW + (2 * imageBorderThickness) + (2 * outerFrameThickness);
    // Canvas height is the sum of all vertical components:
    // top/bottom outer frame + name bar + top padding + image area (image H + its top/bottom border) + bottom padding + type bar
    const canvasHeight = (2 * outerFrameThickness) + nameBarHeight + internalPadding + 
                         (baseH + 2 * imageBorderThickness) + internalPadding + typeBarHeight;

    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    // Start drawing elements from top to bottom

    // 1. Outer Frame (acts as the background for the entire card)
    ctx.fillStyle = outerFrameColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Define the starting X and Y coordinates for elements inside the outer frame
    let currentX = outerFrameThickness;
    let currentY = outerFrameThickness;
    // Calculate the width available for elements inside the outer frame
    const innerWidth = canvas.width - (2 * outerFrameThickness);

    // 2. Name Bar element
    // Background for the name bar
    ctx.fillStyle = nameBackgroundColor;
    ctx.fillRect(currentX, currentY, innerWidth, nameBarHeight);

    // Text for the card name
    ctx.font = `${nameFontWeight} ${nameFontSize}px "${nameFontFamily}", sans-serif`; // Quote font family name
    ctx.fillStyle = nameTextColor;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle"; // Vertically center text
    ctx.fillText(cardName, currentX + innerWidth / 2, currentY + nameBarHeight / 2);
    
    // Move Y coordinate down past the name bar
    currentY += nameBarHeight;

    // 3. Spacing between Name Bar and Image Area
    currentY += internalPadding;

    // 4. Image Area (includes the image itself and its border)
    const imageAreaX = currentX; // Image area aligns horizontally with name/type bars
    const imageAreaY = currentY;
    // Width of the image area including its border (should be same as innerWidth)
    const imageAreaWidth = baseW + (2 * imageBorderThickness); 
    const imageAreaHeight = baseH + (2 * imageBorderThickness);
    
    // Draw the border for the image
    ctx.fillStyle = imageBorderColor;
    ctx.fillRect(imageAreaX, imageAreaY, imageAreaWidth, imageAreaHeight);

    // Draw the Original Image onto the canvas, positioned inside its border
    ctx.drawImage(
        originalImg,
        imageAreaX + imageBorderThickness, 
        imageAreaY + imageBorderThickness,
        baseW,
        baseH
    );
    
    // Move Y coordinate down past the image area
    currentY += imageAreaHeight;

    // 5. Spacing between Image Area and Type Bar
    currentY += internalPadding;

    // 6. Type Bar element
    const typeBarX = currentX; // Type bar aligns horizontally
    const typeBarY = currentY;
    // Background for the type bar
    ctx.fillStyle = typeBackgroundColor;
    ctx.fillRect(typeBarX, typeBarY, innerWidth, typeBarHeight);

    // Text for the card type/description
    ctx.font = `${typeFontWeight} ${typeFontSize}px "${typeFontFamily}", serif`; // Quote font family name
    ctx.fillStyle = typeTextColor;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle"; // Vertically center text
    ctx.fillText(cardType, typeBarX + innerWidth / 2, typeBarY + typeBarHeight / 2);

    // The bottom outer frame is implicitly drawn by the initial fillRect and correct canvasHeight.

    return canvas;
}