Image Of Anfisa

/**
 * Adds text to an image, inspired by the name "Anfisa".
 * This function takes an image and overlays a customizable text label,
 * commonly used for creating memes or captions. The default text is "Анфиса".
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {string} [text='Анфиса'] The text content to write on the image.
 * @param {number} [fontSize=64] The font size in pixels.
 * @param {string} [fontColor='#FFFFFF'] The color of the text fill.
 * @param {string} [strokeColor='#000000'] The color of the text outline.
 * @param {number} [strokeWidth=4] The width of the text outline in pixels.
 * @param {string} [fontFamily='Impact, sans-serif'] The font family for the text. A web-safe font like Impact is used for a classic caption style.
 * @param {string} [vPosition='bottom'] The vertical position of the text. Can be 'top', 'center', or 'bottom'.
 * @returns {HTMLCanvasElement} A new canvas element with the image and text drawn on it.
 */
function processImage(originalImg, text = 'Анфиса', fontSize = 64, fontColor = '#FFFFFF', strokeColor = '#000000', strokeWidth = 4, fontFamily = 'Impact, sans-serif', vPosition = 'bottom') {
    // Create a canvas element to draw on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the intrinsic dimensions of the original image
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Set the canvas size to match the image
    canvas.width = width;
    canvas.height = height;

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

    // --- Configure text styling ---
    ctx.font = `${fontSize}px ${fontFamily}`;
    ctx.fillStyle = fontColor;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeWidth;

    // Set text alignment properties for better rendering
    ctx.textAlign = 'center'; // Horizontally centered
    ctx.lineJoin = 'round'; // Makes outline corners look smoother

    // --- Calculate text position ---
    const x = width / 2;
    let y;

    // A margin from the top/bottom edge, relative to the font size
    const margin = fontSize * 0.5;

    switch (vPosition.toLowerCase()) {
        case 'top':
            ctx.textBaseline = 'top';
            y = margin;
            break;
        case 'center':
            ctx.textBaseline = 'middle';
            y = height / 2;
            break;
        case 'bottom':
        default:
            ctx.textBaseline = 'bottom';
            y = height - margin;
            break;
    }

    // --- Draw the text ---
    // The stroke is drawn first, behind the fill.
    // Only draw stroke if strokeWidth is greater than 0.
    if (strokeWidth > 0) {
        ctx.strokeText(text, x, y);
    }
    ctx.fillText(text, x, y);

    // Return the final canvas element
    return canvas;
}