Image Draw Vs Name Translator Creator

/**
 * Creates a "Draw vs Name Translator" meme format image.
 * This tool arranges an image and text labels onto a new canvas to create a composite image,
 * similar to a popular meme format. It does not use any AI.
 *
 * @param {Image} originalImg The main image or drawing to feature.
 * @param {string} characterName The "name" to be displayed prominently.
 * @param {string} drawLabel The label for the drawing section.
 * @param {string} nameLabel The label for the name section.
 * @param {string} backgroundColor The background color of the final image (e.g., '#FFFFFF').
 * @param {string} textColor The color of the text (e.g., '#000000').
 * @param {string} fontFamily A web-safe or Google Font family for the text. Using a bold, condensed font is recommended for the meme aesthetic.
 * @param {number} labelFontSize The font size in pixels for the smaller labels ('Draw:' and 'Name:').
 * @param {number} nameFontSize The font size in pixels for the main character name.
 * @param {number} padding The padding in pixels around the entire content.
 * @param {number} spacing The vertical spacing in pixels between elements.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with the canvas element containing the final image.
 */
async function processImage(
    originalImg,
    characterName = 'Character Name',
    drawLabel = 'Draw:',
    nameLabel = 'Name:',
    backgroundColor = '#ffffff',
    textColor = '#000000',
    fontFamily = 'Impact, sans-serif',
    labelFontSize = 30,
    nameFontSize = 48,
    padding = 20,
    spacing = 15
) {
    // It's good practice to ensure fonts are loaded before using them on a canvas,
    // especially if they are web fonts (like from Google Fonts).
    try {
        await document.fonts.load(`${labelFontSize}px ${fontFamily}`);
        await document.fonts.load(`${nameFontSize}px ${fontFamily}`);
    } catch (e) {
        console.warn(`Font '${fontFamily}' might not be available. The browser will use a fallback.`, e);
    }

    // Create a temporary canvas context to measure text widths without drawing anything yet.
    const tempCtx = document.createElement('canvas').getContext('2d');

    // Measure the width of all text elements to determine the required canvas width.
    tempCtx.font = `${labelFontSize}px ${fontFamily}`;
    const drawLabelWidth = tempCtx.measureText(drawLabel).width;
    const nameLabelWidth = tempCtx.measureText(nameLabel).width;

    tempCtx.font = `${nameFontSize}px ${fontFamily}`;
    const characterNameWidth = tempCtx.measureText(characterName).width;

    // The final width will be the maximum of the image width and text widths, plus padding.
    const contentWidth = Math.max(
        originalImg.width,
        drawLabelWidth,
        nameLabelWidth,
        characterNameWidth
    );
    const canvasWidth = contentWidth + padding * 2;

    // The final height is the sum of all elements, paddings, and spacings.
    const canvasHeight = (padding * 2) + // Top and bottom padding
        labelFontSize + // Height of 'Draw:' label
        spacing +
        originalImg.height + // Height of the image
        spacing +
        labelFontSize + // Height of 'Name:' label
        spacing +
        nameFontSize; // Height of the character name

    // Create the final canvas and get its 2D context.
    const canvas = document.createElement('canvas');
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    const ctx = canvas.getContext('2d');

    // 1. Fill the background
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 2. Set up text drawing properties
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center'; // Center text horizontally
    ctx.textBaseline = 'top'; // Align text from the top

    // Use a tracker for the current vertical position (y-coordinate)
    let currentY = padding;

    // 3. Draw the "Draw:" label
    ctx.font = `${labelFontSize}px ${fontFamily}`;
    ctx.fillText(drawLabel, canvas.width / 2, currentY);
    currentY += labelFontSize + spacing;

    // 4. Draw the user's image, centered horizontally
    const imageX = (canvas.width - originalImg.width) / 2;
    ctx.drawImage(originalImg, imageX, currentY);
    currentY += originalImg.height + spacing;

    // 5. Draw the "Name:" label
    ctx.font = `${labelFontSize}px ${fontFamily}`;
    ctx.fillText(nameLabel, canvas.width / 2, currentY);
    currentY += labelFontSize + spacing;

    // 6. Draw the main character name
    ctx.font = `${nameFontSize}px ${fontFamily}`;
    ctx.fillText(characterName, canvas.width / 2, currentY);

    // Return the completed canvas element
    return canvas;
}