Image Name Translator Using Alphabet

/**
 * Overlays an image with a "translated" version of a given text, using a special symbolic alphabet.
 * The text is placed inside a padded, semi-transparent background for readability.
 *
 * @param {Image} originalImg The original javascript Image object to process.
 * @param {string} [textToTranslate="Image Name"] The text to be translated and displayed on the image.
 * @param {string} [textColor='#FFFFFF'] The color of the translated text.
 * @param {number} [fontSize=48] The font size of the text in pixels.
 * @param {string} [position='bottom-center'] The position of the text. Accepted values: 'top-left', 'top-center', 'top-right', 'middle-left', 'center', 'middle-center', 'middle-right', 'bottom-left', 'bottom-center', 'bottom-right'.
 * @param {string} [backgroundColor='rgba(0, 0, 0, 0.5)'] The background color of the text box. Use 'transparent' for no background.
 * @returns {HTMLCanvasElement} A new canvas element with the original image and the translated text overlay.
 */
async function processImage(originalImg, textToTranslate = "Image Name", textColor = '#FFFFFF', fontSize = 48, position = 'bottom-center', backgroundColor = 'rgba(0, 0, 0, 0.5)') {

    // The special alphabet map for "translation"
    const alphabetMap = {
        // Uppercase
        'A': 'Λ', 'B': 'ß', 'C': 'Ͻ', 'D': 'Ð', 'E': 'Σ', 'F': 'Ŧ', 'G': 'Ģ', 'H': 'Ħ', 'I': 'Ι', 'J': 'Ј', 'K': 'Ҡ',
        'L': 'Γ', 'M': 'Μ', 'N': 'И', 'O': 'Ω', 'P': 'Ρ', 'Q': 'Ǫ', 'R': 'Я', 'S': 'Ѕ', 'T': 'Τ', 'U': 'Ц', 'V': 'V',
        'W': 'Ш', 'X': 'Χ', 'Y': 'Υ', 'Z': 'Ζ',
        // Lowercase
        'a': 'λ', 'b': 'β', 'c': 'ͼ', 'd': 'δ', 'e': 'ε', 'f': 'ғ', 'g': 'ģ', 'h': 'н', 'i': 'ι', 'j': 'ј', 'k': 'κ',
        'l': 'γ', 'm': 'μ', 'n': 'η', 'o': 'ο', 'p': 'ρ', 'q': 'ǫ', 'r': 'г', 's': 'ѕ', 't': 'τ', 'u': 'υ', 'v': 'v',
        'w': 'ш', 'x': 'χ', 'y': 'у', 'z': 'z',
        // Numbers
        '0': 'Ѳ', '1': 'Ι', '2': 'Ƨ', '3': 'З', '4': 'Ч', '5': '5', '6': 'Ϭ', '7': '7', '8': '8', '9': '9',
        // Common symbols
        ' ': ' ', '.': '·', ',': ',', '!': '¡', '?': '¿'
    };

    // 1. Create canvas and draw the original image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    ctx.drawImage(originalImg, 0, 0);

    if (!textToTranslate.trim()) {
        return canvas; // Return original image if there's no text
    }

    // 2. Translate the input text
    let translatedText = '';
    for (const char of textToTranslate) {
        translatedText += alphabetMap[char] || char;
    }

    // 3. Set up text styling and measure text
    ctx.font = `${fontSize}px Arial`;
    ctx.textBaseline = "middle";
    const textMetrics = ctx.measureText(translatedText);
    const textWidth = textMetrics.width;

    // 4. Calculate dimensions and positions
    const padding = fontSize * 0.25;
    const boxWidth = textWidth + padding * 2;
    const boxHeight = fontSize + padding * 2;
    
    let textX, textY, boxX, boxY;

    // Use a switch statement to handle all position cases
    switch (position) {
        case 'top-left':
            ctx.textAlign = 'left';
            boxX = padding;
            boxY = padding;
            textX = boxX + padding;
            textY = boxY + boxHeight / 2;
            break;
        case 'top-center':
            ctx.textAlign = 'center';
            boxX = (canvas.width - boxWidth) / 2;
            boxY = padding;
            textX = canvas.width / 2;
            textY = boxY + boxHeight / 2;
            break;
        case 'top-right':
            ctx.textAlign = 'right';
            boxX = canvas.width - boxWidth - padding;
            boxY = padding;
            textX = canvas.width - padding * 2;
            textY = boxY + boxHeight / 2;
            break;
        case 'middle-left':
            ctx.textAlign = 'left';
            boxX = padding;
            boxY = (canvas.height - boxHeight) / 2;
            textX = boxX + padding;
            textY = canvas.height / 2;
            break;
        case 'center':
        case 'middle-center':
            ctx.textAlign = 'center';
            boxX = (canvas.width - boxWidth) / 2;
            boxY = (canvas.height - boxHeight) / 2;
            textX = canvas.width / 2;
            textY = canvas.height / 2;
            break;
        case 'middle-right':
            ctx.textAlign = 'right';
            boxX = canvas.width - boxWidth - padding;
            boxY = (canvas.height - boxHeight) / 2;
            textX = canvas.width - padding * 2;
            textY = canvas.height / 2;
            break;
        case 'bottom-left':
            ctx.textAlign = 'left';
            boxX = padding;
            boxY = canvas.height - boxHeight - padding;
            textX = boxX + padding;
            textY = boxY + boxHeight / 2;
            break;
        case 'bottom-right':
            ctx.textAlign = 'right';
            boxX = canvas.width - boxWidth - padding;
            boxY = canvas.height - boxHeight - padding;
            textX = canvas.width - padding * 2;
            textY = boxY + boxHeight / 2;
            break;
        case 'bottom-center':
        default:
            ctx.textAlign = 'center';
            boxX = (canvas.width - boxWidth) / 2;
            boxY = canvas.height - boxHeight - padding;
            textX = canvas.width / 2;
            textY = boxY + boxHeight / 2;
            break;
    }

    // 5. Draw background and text
    if (backgroundColor && backgroundColor !== 'transparent' && backgroundColor !== 'none') {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(boxX, boxY, boxWidth, boxHeight);
    }
    
    ctx.fillStyle = textColor;
    ctx.fillText(translatedText, textX, textY);

    // 6. Return the final canvas
    return canvas;
}