Image Extra Curricular Reading Text Adder

function processImage(
    originalImg,
    text = "Внеклассное чтение",
    position = "bottom",
    fontSize = 0,
    textColor = "#ffffff",
    bannerColor = "rgba(0, 0, 0, 0.6)"
) {
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');

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

    if (!text) {
        return canvas; // If no text is provided, return the original image
    }

    // Determine font size: if 0 or negative, automatically scale based on image height
    const actualFontSize = fontSize > 0 ? fontSize : Math.max(16, Math.floor(canvas.height * 0.08));
    ctx.font = `bold ${actualFontSize}px Arial, sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Calculate dimensions for the banner background
    const bannerPadding = actualFontSize * 0.6;
    const bannerHeight = actualFontSize + bannerPadding;

    let bannerY = 0;
    let textY = 0;

    // Determine vertical position
    switch (position.toLowerCase()) {
        case 'top':
            bannerY = 0;
            textY = bannerHeight / 2;
            break;
        case 'center':
            bannerY = (canvas.height - bannerHeight) / 2;
            textY = canvas.height / 2;
            break;
        case 'bottom':
        default:
            bannerY = canvas.height - bannerHeight;
            textY = canvas.height - bannerHeight / 2;
            break;
    }

    // Draw the semi-transparent banner
    if (bannerColor && bannerColor.toLowerCase() !== 'transparent') {
        ctx.fillStyle = bannerColor;
        ctx.fillRect(0, bannerY, canvas.width, bannerHeight);
    }

    // Configure text shadow for better readability
    ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
    ctx.shadowBlur = actualFontSize * 0.1;
    ctx.shadowOffsetX = actualFontSize * 0.05;
    ctx.shadowOffsetY = actualFontSize * 0.05;

    // Draw the text (max width set to leave 20px padding)
    ctx.fillStyle = textColor;
    ctx.fillText(text, canvas.width / 2, textY, canvas.width - 20);

    return canvas;
}