Image Annotation For Building Address

/**
 * Annotates an image with a building address label.
 *
 * @param {HTMLImageElement} originalImg The original image object to be annotated.
 * @param {string} [addressText="Здание по адресу"] The address text to display.
 * @param {string} [textColor="#FFFFFF"] The color of the address text (CSS color string).
 * @param {string} [backgroundColor="#00539F"] The background color of the label (CSS color string).
 * @param {number} [fontSize=24] The font size of the text in pixels.
 * @param {string} [fontFamily="Arial, sans-serif"] The font family for the text.
 * @param {string} [position="bottom-left"] The position of the annotation. Accepts "top-left", "top-right", "bottom-left", "bottom-right", "center".
 * @returns {HTMLCanvasElement} A new canvas element with the annotated image.
 */
function processImage(originalImg, addressText = "Здание по адресу", textColor = "#FFFFFF", backgroundColor = "#00539F", fontSize = 24, fontFamily = "Arial, sans-serif", position = "bottom-left") {
    // 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);

    // If there's no text to add, return the canvas with just the image.
    if (!addressText || !addressText.trim()) {
        return canvas;
    }

    // 4. Configure text properties for measurement.
    ctx.font = `bold ${fontSize}px ${fontFamily}`;
    ctx.textBaseline = 'top';

    // 5. Measure the text to determine the size of the background label.
    const textMetrics = ctx.measureText(addressText);
    const textWidth = textMetrics.width;
    const textHeight = fontSize; // Use fontSize for consistent height calculation.
    
    // Add padding around the text for better aesthetics.
    const padding = fontSize * 0.5;
    const rectWidth = textWidth + (padding * 2);
    const rectHeight = textHeight + (padding * 2);
    const cornerRadius = fontSize * 0.25;

    // 6. Calculate the position (x, y) of the label based on the 'position' parameter.
    let rectX, rectY;
    const margin = fontSize * 0.75; // Margin from the image edges.

    switch (position) {
        case "top-left":
            rectX = margin;
            rectY = margin;
            break;
        case "top-right":
            rectX = canvas.width - rectWidth - margin;
            rectY = margin;
            break;
        case "bottom-right":
            rectX = canvas.width - rectWidth - margin;
            rectY = canvas.height - rectHeight - margin;
            break;
        case "center":
            rectX = (canvas.width - rectWidth) / 2;
            rectY = (canvas.height - rectHeight) / 2;
            break;
        case "bottom-left":
        default:
            rectX = margin;
            rectY = canvas.height - rectHeight - margin;
            break;
    }

    // 7. Draw the rounded background rectangle.
    ctx.fillStyle = backgroundColor;
    ctx.beginPath();
    // Start at top-left corner
    ctx.moveTo(rectX + cornerRadius, rectY);
    // Top edge
    ctx.lineTo(rectX + rectWidth - cornerRadius, rectY);
    // Top-right corner
    ctx.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius);
    // Right edge
    ctx.lineTo(rectX + rectWidth, rectY + rectHeight - cornerRadius);
    // Bottom-right corner
    ctx.arcTo(rectX + rectWidth, rectY + rectHeight, rectX + rectWidth - cornerRadius, rectY + rectHeight, cornerRadius);
    // Bottom edge
    ctx.lineTo(rectX + cornerRadius, rectY + rectHeight);
    // Bottom-left corner
    ctx.arcTo(rectX, rectY + rectHeight, rectX, rectY + rectHeight - cornerRadius, cornerRadius);
    // Left edge
    ctx.lineTo(rectX, rectY + cornerRadius);
    // Top-left corner
    ctx.arcTo(rectX, rectY, rectX + cornerRadius, rectY, cornerRadius);
    ctx.closePath();
    ctx.fill();

    // 8. Draw the address text on top of the background.
    ctx.fillStyle = textColor;
    const textX = rectX + padding;
    const textY = rectY + padding;
    ctx.fillText(addressText, textX, textY);

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