Image Of House On Street

/**
 * Adds text with a customizable outline to an image.
 * This function takes an image and overlays text on it, providing options for
 * font size, family, color, stroke, and position. The positioning is based on
 * percentage, making it responsive to different image sizes. It handles multi-line
 * text by splitting the input string at newline characters.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {string} [text="Дом по здание\nУлице"] The text to write on the image. Use '\n' for line breaks.
 * @param {number} [fontSize=48] The font size in pixels.
 * @param {string} [fontFamily="Impact"] The font family to use (e.g., 'Arial', 'Impact', 'Verdana').
 * @param {string} [textColor="#FFFFFF"] The color of the text (e.g., '#FFFFFF', 'red').
 * @param {string} [strokeColor="#000000"] The color of the text outline.
 * @param {number} [strokeWidth=3] The width of the text outline in pixels.
 * @param {number} [positionX=50] The horizontal position of the text center, as a percentage of the image width (0-100).
 * @param {number} [positionY=15] The vertical position of the text block, as a percentage of the image height (0-100).
 * @param {string} [textAlign="center"] The horizontal alignment of the text ('left', 'center', 'right').
 * @returns {HTMLCanvasElement} A new canvas element with the image and text drawn on it.
 */
function processImage(
    originalImg,
    text = "Дом по здание\nУлице",
    fontSize = 64,
    fontFamily = "Impact",
    textColor = "#FFFFFF",
    strokeColor = "#000000",
    strokeWidth = 4,
    positionX = 50,
    positionY = 15,
    textAlign = "center"
) {
    // Create a canvas element to draw on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

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

    // --- Text Drawing ---

    // Set text properties
    ctx.font = `${fontSize}px ${fontFamily}`;
    ctx.fillStyle = textColor;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeWidth;
    ctx.textAlign = textAlign;
    ctx.textBaseline = 'middle'; // Align text vertically to its baseline

    // Calculate the pixel coordinates from the percentage inputs
    const x = canvas.width * (positionX / 100);
    const y = canvas.height * (positionY / 100);

    // Split text into multiple lines if '\n' is present
    const lines = text.split('\n');
    
    // Set a reasonable line height based on the font size
    const lineHeight = fontSize * 1.2;

    // Calculate the starting Y position to center the entire text block vertically
    const totalTextBlockHeight = (lines.length - 1) * lineHeight;
    const startY = y - totalTextBlockHeight / 2;

    // Draw each line of text
    lines.forEach((line, index) => {
        const currentY = startY + (index * lineHeight);

        // Draw the stroke (outline) first
        if (strokeWidth > 0) {
            ctx.strokeText(line, x, currentY);
        }
        
        // Draw the filled text on top of the stroke
        ctx.fillText(line, x, currentY);
    });

    // Return the final canvas element
    return canvas;
}