Image Of Prince Zart

async function processImage(originalImg, text = 'Принц Зарт', fontColor = '#DAA520', position = 'bottom-center', fontFamily = 'Playfair Display', fontSizeRatio = 0.05) {
    /**
     * This function interprets "Image of Prince Zart" by overlaying the text "Принц Зарт"
     * onto the provided image, with a regal-looking style.
     *
     * @param {Image} originalImg - The original javascript Image object.
     * @param {string} text - The text to overlay on the image.
     * @param {string} fontColor - The color of the text (e.g., '#DAA520', 'gold').
     * @param {string} position - The position of the text. Options: 'top-left', 'top-center', 'top-right',
     * 'center-left', 'center', 'center-right', 'bottom-left', 'bottom-center', 'bottom-right'.
     * @param {string} fontFamily - The font family for the text. Supports web-safe fonts and some Google Fonts.
     * @param {number} fontSizeRatio - The font size as a ratio of the image's width (e.g., 0.05 for 5%).
     * @returns {Promise<HTMLCanvasElement>} A canvas element with the original image and the text overlay.
     */

    // Step 1: Create a canvas and get its context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Step 2: Set canvas dimensions to match the image
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // Step 3: Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Step 4: Dynamically load the specified Google Font if it's not already available.
    const googleFontUrls = {
        'Playfair Display': 'https://fonts.gstatic.com/s/playfairdisplay/v30/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWk_d3ug.woff2',
        'Lobster': 'https://fonts.gstatic.com/s/lobster/v28/neILzCirqoswsqX9zo-mM5Ez.woff2',
        'Roboto': 'https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2',
        'Merriweather': 'https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-fCZMdeX3rg.woff2'
    };

    let finalFontFamily = fontFamily;
    if (fontFamily in googleFontUrls && !document.fonts.check(`12px "${fontFamily}"`)) {
        try {
            const fontFace = new FontFace(fontFamily, `url(${googleFontUrls[fontFamily]})`);
            await fontFace.load();
            document.fonts.add(fontFace);
        } catch (e) {
            console.error(`Could not load font: ${fontFamily}. Falling back to serif.`, e);
            finalFontFamily = 'serif'; // Fallback to a safe font if loading fails
        }
    }

    // Step 5: Set up text properties
    const fontSize = Math.max(12, Math.floor(width * fontSizeRatio)); // Ensure font size is at least 12px
    ctx.font = `bold ${fontSize}px "${finalFontFamily}", serif`;
    ctx.fillStyle = fontColor;
    ctx.strokeStyle = 'black'; // Add a stroke for better visibility
    ctx.lineWidth = Math.max(1, fontSize / 20);

    // Step 6: Calculate text position based on the 'position' parameter
    const padding = fontSize * 0.5;
    let x, y;

    switch (position) {
        case 'top-left':
            ctx.textAlign = 'left';
            ctx.textBaseline = 'top';
            x = padding;
            y = padding;
            break;
        case 'top-center':
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            x = width / 2;
            y = padding;
            break;
        case 'top-right':
            ctx.textAlign = 'right';
            ctx.textBaseline = 'top';
            x = width - padding;
            y = padding;
            break;
        case 'center-left':
            ctx.textAlign = 'left';
            ctx.textBaseline = 'middle';
            x = padding;
            y = height / 2;
            break;
        case 'center':
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            x = width / 2;
            y = height / 2;
            break;
        case 'center-right':
            ctx.textAlign = 'right';
            ctx.textBaseline = 'middle';
            x = width - padding;
            y = height / 2;
            break;
        case 'bottom-left':
            ctx.textAlign = 'left';
            ctx.textBaseline = 'bottom';
            x = padding;
            y = height - padding;
            break;
        case 'bottom-right':
            ctx.textAlign = 'right';
            ctx.textBaseline = 'bottom';
            x = width - padding;
            y = height - padding;
            break;
        case 'bottom-center':
        default:
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            x = width / 2;
            y = height - padding;
            break;
    }

    // Step 7: Draw the text with a stroke (outline) and then fill it
    ctx.strokeText(text, x, y);
    ctx.fillText(text, x, y);

    // Step 8: Return the final canvas
    return canvas;
}