Image Title Translator And Link Indexer

/**
 * Creates a new image with a title and an index/link added in a bar below the original image.
 * This function simulates the behavior of a tool that adds a translated title and an indexed link.
 *
 * @param {Image} originalImg The original JavaScript Image object.
 * @param {string} titleText The text to be used as the main title.
 * @param {string} linkText The text to be used as the secondary index or link.
 * @param {string} backgroundColor The CSS color for the background bar where the text is placed.
 * @param {string} textColor The CSS color for the text.
 * @param {string} fontFamily A web-safe font family for the text.
 * @param {number} titleSize The font size in pixels for the title.
 * @param {number} linkSize The font size in pixels for the link/index text.
 * @param {number} padding The vertical padding in pixels within the text bar.
 * @returns {HTMLCanvasElement} A new canvas element containing the modified image.
 */
function processImage(
    originalImg,
    titleText = "Sample Title",
    linkText = "index-link-12345",
    backgroundColor = "black",
    textColor = "white",
    fontFamily = "Arial, sans-serif",
    titleSize = 40,
    linkSize = 20,
    padding = 20
) {
    // 1. Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure numeric parameters are numbers
    const numTitleSize = Number(titleSize);
    const numLinkSize = Number(linkSize);
    const numPadding = Number(padding);

    // 2. Calculate the dimensions for the text bar
    // Height = top padding + title height + middle padding + link height + bottom padding
    const barHeight = numPadding + numTitleSize + numPadding + numLinkSize + numPadding;

    // 3. Set the final canvas dimensions
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight + barHeight;

    // 4. Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, originalImg.naturalWidth, originalImg.naturalHeight);

    // 5. Draw the background bar for the text
    ctx.fillStyle = backgroundColor;
    const barYPosition = originalImg.naturalHeight;
    ctx.fillRect(0, barYPosition, canvas.width, barHeight);

    // 6. Set text properties for drawing
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // 7. Draw the title text
    // Y position = start of bar + top padding + half of title font size
    const titleY = barYPosition + numPadding + (numTitleSize / 2);
    ctx.font = `bold ${numTitleSize}px ${fontFamily}`;
    ctx.fillText(titleText, canvas.width / 2, titleY);

    // 8. Draw the link/index text
    // Y position = title's y-center + half title font size + middle padding + half link font size
    const linkY = titleY + (numTitleSize / 2) + numPadding + (numLinkSize / 2);
    ctx.font = `${numLinkSize}px ${fontFamily}`;
    ctx.fillText(linkText, canvas.width / 2, linkY);

    // 9. Return the final canvas
    return canvas;
}