Image Address Translator

/**
 * Adds an "address" text overlay onto an image.
 * This function draws the original image on a canvas and then adds a text block
 * with a semi-transparent background, which can be positioned in various corners or the center.
 *
 * @param {Image} originalImg The original Image object to process. It's assumed to be fully loaded.
 * @param {string} [addressText="123 Main St, Anytown, USA"] The text content to display on the image.
 * @param {string} [position="bottom-right"] The position of the text overlay. Accepts 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'center'.
 * @param {number} [fontSize=24] The font size of the text in pixels.
 * @param {string} [fontColor="#FFFFFF"] The color of the text.
 * @param {string} [fontFamily="Arial"] The font family for the text.
 * @param {string} [backgroundColor="rgba(0, 0, 0, 0.5)"] The background color of the text overlay. Use 'transparent' for no background.
 * @param {number} [padding=10] The padding in pixels around the text within its background. This also acts as the margin from the image edge.
 * @returns {HTMLCanvasElement} A new canvas element with the image and text overlay.
 */
function processImage(originalImg, addressText = "123 Main St, Anytown, USA", position = "bottom-right", fontSize = 24, fontColor = "#FFFFFF", fontFamily = "Arial", backgroundColor = "rgba(0, 0, 0, 0.5)", padding = 10) {
    // 1. Create a canvas and get its 2D rendering context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for the intrinsic size of the image, falling back to width/height
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // 2. Set the canvas dimensions to match the image
    canvas.width = imgWidth;
    canvas.height = imgHeight;

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

    // If the address text is empty, no need to proceed further
    if (!addressText.trim()) {
        return canvas;
    }

    // 4. Set up font properties for the text overlay
    const font = `${fontSize}px ${fontFamily}`;
    ctx.font = font;

    // 5. Measure the text to calculate its width
    const textMetrics = ctx.measureText(addressText);
    const textWidth = textMetrics.width;
    // Using the font size as the text height is a reliable approximation for layout
    const textHeight = fontSize;

    // 6. Calculate the dimensions of the background box, including padding
    const boxWidth = textWidth + (padding * 2);
    const boxHeight = textHeight + (padding * 2);

    // 7. Determine the top-left (x, y) coordinates for the background box
    // The padding value is also used as the margin from the canvas edges for simplicity
    const margin = padding;
    let bgX, bgY;

    switch (position) {
        case 'top-left':
            bgX = margin;
            bgY = margin;
            break;
        case 'top-right':
            bgX = canvas.width - boxWidth - margin;
            bgY = margin;
            break;
        case 'bottom-left':
            bgX = margin;
            bgY = canvas.height - boxHeight - margin;
            break;
        case 'center':
            bgX = (canvas.width - boxWidth) / 2;
            bgY = (canvas.height - boxHeight) / 2;
            break;
        case 'bottom-right':
        default:
            bgX = canvas.width - boxWidth - margin;
            bgY = canvas.height - boxHeight - margin;
            break;
    }

    // 8. Draw the background rectangle for the text if a color is provided
    if (backgroundColor && backgroundColor !== 'transparent') {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(bgX, bgY, boxWidth, boxHeight);
    }

    // 9. Draw the address text on top of the background
    ctx.fillStyle = fontColor;
    ctx.textBaseline = 'top'; // Aligning by the top makes vertical positioning within the box simpler
    const textX = bgX + padding;
    const textY = bgY + padding;
    ctx.fillText(addressText, textX, textY);

    // 10. Return the final canvas element containing the composed image
    return canvas;
}