Image Caption Overlay Generator

/**
 * Overlays a text caption on an image, similar to a meme generator.
 *
 * @param {Image} originalImg The original image object to add the caption to.
 * @param {string} [captionText="Мы уже в пути!"] The text to display. Use '\n' for line breaks.
 * @param {number} [fontSize=48] The font size of the caption text in pixels.
 * @param {string} [fontFamily="Impact, Arial, sans-serif"] The font family for the caption text.
 * @param {string} [fontColor="white"] The color of the caption text.
 * @param {string} [strokeColor="black"] The color of the outline around the caption text.
 * @param {number} [strokeWidth=2] The width of the text outline in pixels. Set to 0 to disable.
 * @param {string} [position="bottom"] The vertical position of the caption. Accepts 'top', 'bottom', or 'center'.
 * @param {string} [textAlign="center"] The horizontal alignment of the caption. Accepts 'left', 'center', or 'right'.
 * @param {number} [padding=20] The padding in pixels from the edge of the image.
 * @returns {HTMLCanvasElement} A new canvas element with the image and caption drawn on it.
 */
function processImage(
    originalImg,
    captionText = "Мы уже в пути!",
    fontSize = 48,
    fontFamily = "Impact, Arial, sans-serif",
    fontColor = "white",
    strokeColor = "black",
    strokeWidth = 2,
    position = "bottom",
    textAlign = "center",
    padding = 20
) {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set 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, canvas.width, canvas.height);

    // Prepare text properties
    const lines = captionText.split('\n');
    // Using a line height of 1.2 times the font size provides good spacing
    const lineHeight = fontSize * 1.2;

    // Set text styling
    ctx.font = `bold ${fontSize}px ${fontFamily}`;
    ctx.fillStyle = fontColor;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeWidth;
    ctx.textAlign = textAlign;
    // Set textBaseline to 'top' to simplify vertical alignment calculations for multi-line text
    ctx.textBaseline = 'top';

    // Calculate horizontal position (x-coordinate)
    let x;
    if (textAlign === 'left') {
        x = padding;
    } else if (textAlign === 'right') {
        x = canvas.width - padding;
    } else { // 'center'
        x = canvas.width / 2;
    }

    // Calculate vertical position (y-coordinate for the top of the text block)
    // The total height of the text block is the space from the top of the first line to the bottom of the last line.
    const totalTextHeight = (lines.length - 1) * lineHeight + fontSize;

    let startY;
    if (position === 'top') {
        startY = padding;
    } else if (position === 'center') {
        startY = (canvas.height - totalTextHeight) / 2;
    } else { // 'bottom'
        startY = canvas.height - padding - totalTextHeight;
    }

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

        // Draw the stroke (outline) first so the fill is on top
        if (strokeWidth > 0) {
            ctx.strokeText(line, x, lineY);
        }
        // Draw the fill
        ctx.fillText(line, x, lineY);
    });

    // Return the final canvas element
    return canvas;
}