Image Text Underneath Adder

function processImage(
    originalImg, 
    text = "Под ней текст", 
    fontSize = 24, 
    fontFamily = "Arial, sans-serif", 
    textColor = "#000000", 
    bgColor = "#ffffff", 
    padding = 20
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Convert inputs to numbers where appropriate
    const parsedFontSize = Number(fontSize) || 24;
    const parsedPadding = Number(padding) || 0;
    
    // Set initial canvas dimension for measuring text
    // Important to set font before measuring
    canvas.width = originalImg.width || 1;
    canvas.height = originalImg.height || 1;
    ctx.font = `${parsedFontSize}px ${fontFamily}`;
    
    const maxWidth = Math.max(originalImg.width - (parsedPadding * 2), parsedFontSize);
    const lineHeight = parsedFontSize * 1.2;
    
    // Handle literal string '\n' and actual new lines
    const paragraphs = String(text).replace(/\\n/g, '\n').split('\n');
    const lines = [];
    
    // Text wrapping logic
    for (let p = 0; p < paragraphs.length; p++) {
        const words = paragraphs[p].split(' ');
        let currentLine = words[0] || "";
        
        for (let i = 1; i < words.length; i++) {
            const word = words[i];
            const width = ctx.measureText(currentLine + " " + word).width;
            
            if (width < maxWidth) {
                currentLine += " " + word;
            } else {
                lines.push(currentLine);
                currentLine = word;
            }
        }
        lines.push(currentLine);
    }
    
    // Calculate final dimensions
    const textBlockHeight = lines.length * lineHeight;
    const bottomSectionHeight = textBlockHeight + (parsedPadding * 2);
    
    canvas.width = originalImg.width;
    canvas.height = originalImg.height + bottomSectionHeight;
    
    // Context is cleared/reset when canvas resizing, so we re-apply settings
    ctx.font = `${parsedFontSize}px ${fontFamily}`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Draw original image
    ctx.drawImage(originalImg, 0, 0);
    
    // Draw background for the text area
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, originalImg.height, canvas.width, bottomSectionHeight);
    
    // Draw text
    ctx.fillStyle = textColor;
    
    // Start Y coordinate for the first line of text
    const startY = originalImg.height + parsedPadding + (lineHeight / 2);
    
    for (let i = 0; i < lines.length; i++) {
        ctx.fillText(lines[i], canvas.width / 2, startY + (i * lineHeight));
    }
    
    return canvas;
}