Image Phrase Overlay Tool

/**
 * Overlays a given phrase onto an image.
 * This function creates a canvas, draws the original image, and then adds text on top of it.
 * The text style, content, and position are customizable.
 *
 * @param {Image} originalImg The original Javascript Image object.
 * @param {string} [text='Ввремя для…ВиБокса!'] The phrase to overlay on the image.
 * @param {number} [fontSize=48] The font size of the text in pixels.
 * @param {string} [fontColor='#FFFFFF'] The color of the text fill (e.g., 'white', '#FFF').
 * @param {string} [strokeColor='#000000'] The color of the text outline.
 * @param {number} [strokeWidth=2] The width of the text outline in pixels.
 * @param {string} [position='bottom-center'] The position of the text. Can be 'top-center', 'center', or 'bottom-center'.
 * @returns {HTMLCanvasElement} A new canvas element with the image and text overlay.
 */
function processImage(originalImg, text = 'Ввремя для…ВиБокса!', fontSize = 48, fontColor = '#FFFFFF', strokeColor = '#000000', strokeWidth = 2, position = 'bottom-center') {
    // Create a new 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);

    // --- Text Styling ---
    // Use a bold, impactful font stack that supports Cyrillic characters
    ctx.font = `bold ${fontSize}px 'Impact', 'Arial Black', sans-serif`;
    ctx.fillStyle = fontColor;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeWidth;

    // Align text to the center horizontally
    ctx.textAlign = 'center';

    // --- Text Positioning ---
    const x = canvas.width / 2;
    let y;
    // Calculate a margin based on the font size to avoid placing text right at the edge
    const margin = fontSize * 0.5;

    switch (position.toLowerCase()) {
        case 'top-center':
            // Align based on the top of the text
            ctx.textBaseline = 'top';
            y = margin;
            break;
        case 'center':
            // Align based on the middle of the text
            ctx.textBaseline = 'middle';
            y = canvas.height / 2;
            break;
        case 'bottom-center':
        default:
            // Align based on the bottom of the text
            ctx.textBaseline = 'bottom';
            y = canvas.height - margin;
            break;
    }
    
    // --- Drawing the Text ---
    // Draw the outline first
    ctx.strokeText(text, x, y);
    // Then draw the fill on top of the outline
    ctx.fillText(text, x, y);

    // Return the final canvas element
    return canvas;
}