Image Media Character Title Creator

/**
 * Creates a "Media Character Title" style image by adding text bars to the top and bottom.
 * The text font size is automatically adjusted to fit the image width.
 *
 * @param {HTMLImageElement} originalImg The original image object.
 * @param {string} [titleText='TITLE'] The text to display in the top bar.
 * @param {string} [characterText='CHARACTER'] The text to display in the bottom bar.
 * @param {string} [fontFamily='Impact, Arial Black, Gadget, sans-serif'] The CSS font-family string for the text.
 * @param {string} [textColor='#FFFFFF'] The color of the text.
 * @param {string} [outlineColor='#000000'] The color of the text outline.
 * @param {number} [outlineWidth=3] The base width of the text outline in pixels. It will be scaled with the font size.
 * @param {string} [backgroundColor='#000000'] The background color of the text bars.
 * @param {number} [fontSize=56] The target font size in pixels. This will be scaled down if the text is too wide.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with the final canvas element.
 */
async function processImage(
    originalImg,
    titleText = 'TITLE',
    characterText = 'CHARACTER',
    fontFamily = 'Impact, Arial Black, Gadget, sans-serif',
    textColor = '#FFFFFF',
    outlineColor = '#000000',
    outlineWidth = 3,
    backgroundColor = '#000000',
    fontSize = 56
) {
    // Wait for fonts to be ready to ensure custom fonts are loaded before measurement.
    try {
        await document.fonts.ready;
    } catch (e) {
        console.error("Error while waiting for fonts to load.", e);
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // --- Step 1: Calculate the optimal font size ---
    // We start with the desired font size and scale it down if the text is too wide.
    let finalFontSize = fontSize;
    ctx.font = `${finalFontSize}px ${fontFamily}`;

    // Measure both lines of text to see which is wider.
    const titleMetrics = ctx.measureText(titleText);
    const characterMetrics = ctx.measureText(characterText);

    // Define a padding to prevent text from touching the edges.
    const textPadding = imgWidth * 0.05; // 5% padding on each side
    const availableWidth = imgWidth - textPadding;
    
    // Find the widest text element's width.
    const maxTextWidth = Math.max(titleMetrics.width, characterMetrics.width);

    // If the widest text is wider than the available space, calculate the scaling factor.
    if (maxTextWidth > availableWidth) {
        const scaleFactor = availableWidth / maxTextWidth;
        finalFontSize = Math.floor(finalFontSize * scaleFactor);
    }

    // --- Step 2: Determine final canvas and element dimensions ---
    // Calculate the height of the text bars based on the final, scaled font size.
    // Multiplying by 1.5 gives some nice vertical padding around the text.
    const barHeight = Math.ceil(finalFontSize * 1.5);
    
    // Also scale the text outline width to keep it proportional to the font size.
    const finalOutlineWidth = Math.max(1, outlineWidth * (finalFontSize / fontSize));

    // Set the final canvas dimensions including the new text bars.
    canvas.width = imgWidth;
    canvas.height = imgHeight + barHeight * 2;

    // --- Step 3: Draw the elements onto the canvas ---
    
    // 1. Draw background bars for the text.
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvas.width, barHeight); // Top bar
    ctx.fillRect(0, canvas.height - barHeight, canvas.width, barHeight); // Bottom bar

    // 2. Draw the original image in the middle.
    ctx.drawImage(originalImg, 0, barHeight, imgWidth, imgHeight);

    // 3. Prepare text styling. Note: context properties are reset when canvas is resized.
    ctx.font = `${finalFontSize}px ${fontFamily}`;
    ctx.fillStyle = textColor;
    ctx.strokeStyle = outlineColor;
    ctx.lineWidth = finalOutlineWidth;
    ctx.lineJoin = 'round'; // For smoother corners on the text outline
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    const x = canvas.width / 2;

    // 4. Draw the top text (title) with its outline.
    const yTop = barHeight / 2;
    ctx.strokeText(titleText, x, yTop);
    ctx.fillText(titleText, x, yTop);

    // 5. Draw the bottom text (character) with its outline.
    const yBottom = canvas.height - barHeight / 2;
    ctx.strokeText(characterText, x, yBottom);
    ctx.fillText(characterText, x, yBottom);

    return canvas;
}