Image Translator Adder

/**
 * Adds a translator's name as a text overlay on an image, typically in a corner.
 * This is useful for crediting translators on translated images like comics or infographics.
 *
 * @param {Image} originalImg The original JavaScript Image object.
 * @param {string} translatorName The name of the translator to add to the image.
 * @param {string} fontColor The color of the text (e.g., 'white', '#FF0000').
 * @param {number} fontSize The size of the font in pixels.
 * @returns {HTMLCanvasElement} A canvas element with the original image and the translator credit.
 */
function processImage(originalImg, translatorName = "Translator Name", fontColor = "white", fontSize = 24) {
    // 1. Create a canvas and get its 2D rendering context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 2. Set the canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // 4. Define settings for the text and its background box
    // Use padding proportional to the font size for a balanced look
    const padding = fontSize * 0.5;
    const font = `bold ${fontSize}px Arial, sans-serif`;

    // 5. Measure the text width to determine the background box size
    ctx.font = font;
    const textMetrics = ctx.measureText(translatorName);
    const textWidth = textMetrics.width;

    // 6. Calculate the dimensions and position of the background box
    // It will be placed in the bottom-right corner with a small margin
    const boxWidth = textWidth + (padding * 2);
    const boxHeight = fontSize + padding;
    const boxX = canvas.width - boxWidth - padding;
    const boxY = canvas.height - boxHeight - padding;

    // 7. Draw the semi-transparent background box for text readability
    ctx.globalAlpha = 0.7; // Set opacity for the box
    ctx.fillStyle = '#000000'; // Black background is common for credits
    ctx.fillRect(boxX, boxY, boxWidth, boxHeight);
    ctx.globalAlpha = 1.0; // Reset opacity for the text

    // 8. Draw the translator's name
    ctx.fillStyle = fontColor;
    ctx.font = font;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Calculate the text position to center it within the background box
    const textX = boxX + boxWidth / 2;
    const textY = boxY + boxHeight / 2;

    ctx.fillText(translatorName, textX, textY);

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