Photo Number Effect For Vegas Pro In YTP Tennis Rounds

/**
 * Applies a number overlay effect to an image, similar to the style seen
 * in "YTP Tennis Rounds" made with Vegas Pro.
 * This function places a large, bold, outlined number in the center of the image.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} numberToDisplay The number to display on the image. Defaults to 1.
 * @param {string} fontColor The color of the number text in a CSS-compatible format. Defaults to '#FFFFFF'.
 * @param {string} outlineColor The color of the text outline. Defaults to '#000000'.
 * @param {number} outlineWidth The width (thickness) of the text outline in pixels. Defaults to 5.
 * @param {number} fontSize The font size as a percentage of the image's height. Defaults to 80.
 * @param {string} fontName The font family to use. Web-safe fonts like 'Arial Black' or 'Impact' are recommended. Defaults to 'Arial Black'.
 * @returns {Promise<HTMLCanvasElement>} A canvas element with the number effect applied.
 */
async function processImage(
    originalImg,
    numberToDisplay = 1,
    fontColor = '#FFFFFF',
    outlineColor = '#000000',
    outlineWidth = 5,
    fontSize = 80,
    fontName = 'Arial Black'
) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set the canvas dimensions to match the image's natural dimensions
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Calculate the actual font size in pixels based on the percentage of the image height
    const calculatedFontSize = Math.floor(height * (fontSize / 100));

    // Set the font properties. Using a bold, sans-serif font is key for this effect.
    ctx.font = `bold ${calculatedFontSize}px "${fontName}", sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Define the style for the text fill and outline
    ctx.fillStyle = fontColor;
    ctx.strokeStyle = outlineColor;
    ctx.lineWidth = outlineWidth;
    // Prevent overly sharp/spiky corners on letters like '1'
    ctx.lineJoin = 'round';

    // Calculate the center point of the canvas
    const x = width / 2;
    const y = height / 2;
    const text = String(numberToDisplay);

    // To create an outline, we first draw the "stroked" version of the text,
    // and then draw the "filled" version on top of it.
    ctx.strokeText(text, x, y);
    ctx.fillText(text, x, y);

    // Return the resulting canvas
    return canvas;
}