Image Textbox Adder Tool

function processImage(
    originalImg,
    text = "This is a sample textbox.\nYou can enter multiline text here to overlay on top of your image.",
    xPos = 50,
    yPos = 50,
    boxWidth = 450,
    boxBgColor = "rgba(0, 0, 0, 0.75)",
    textColor = "#ffffff",
    fontSize = 24,
    fontFamily = "Arial, sans-serif",
    textAlign = "left",
    padding = 25,
    borderRadius = 12
) {
    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);

    // Parse parameters robustly
    let w = parseFloat(boxWidth) || (canvas.width * 0.8);
    let x = parseFloat(xPos) || 0;
    let y = parseFloat(yPos) || 0;
    let pad = parseFloat(padding) || 0;
    let rad = parseFloat(borderRadius) || 0;
    let fSize = parseFloat(fontSize) || 24;

    // Adjust width if it exceeds canvas bounds gracefully
    if (w + x > canvas.width) w = canvas.width - x - pad;
    if (w <= 0) w = 100; // minimum width fallback

    ctx.font = `${fSize}px ${fontFamily}`;
    ctx.textBaseline = "top";

    const lineHeight = fSize * 1.4;
    const maxTextWidth = w - (pad * 2);

    // Text wrapping logic
    const lines = [];
    const paragraphs = String(text).replace(/\\n/g, '\n').split('\n');

    for (const paragraph of paragraphs) {
        if (paragraph.trim() === '') {
            lines.push('');
            continue;
        }
        
        const words = paragraph.split(' ');
        let currentLine = words[0];

        for (let i = 1; i < words.length; i++) {
            const word = words[i];
            const widthMatch = ctx.measureText(currentLine + " " + word).width;
            
            if (widthMatch < maxTextWidth) {
                currentLine += " " + word;
            } else {
                lines.push(currentLine);
                currentLine = word;
            }
        }
        lines.push(currentLine);
    }

    // Auto-calculate the total height needed for the textbox
    const h = (lines.length * lineHeight) + (pad * 2);

    // Draw the Textbox (Rounded Rectangle)
    ctx.fillStyle = boxBgColor;
    ctx.beginPath();
    ctx.moveTo(x + rad, y);
    ctx.lineTo(x + w - rad, y);
    
    if (rad > 0) ctx.quadraticCurveTo(x + w, y, x + w, y + rad);
    ctx.lineTo(x + w, y + h - rad);
    
    if (rad > 0) ctx.quadraticCurveTo(x + w, y + h, x + w - rad, y + h);
    ctx.lineTo(x + rad, y + h);
    
    if (rad > 0) ctx.quadraticCurveTo(x, y + h, x, y + h - rad);
    ctx.lineTo(x, y + rad);
    
    if (rad > 0) ctx.quadraticCurveTo(x, y, x + rad, y);
    ctx.closePath();
    ctx.fill();

    // Set Text Alignment and Setup Rendering X Positions
    ctx.fillStyle = textColor;
    ctx.textAlign = ['left', 'center', 'right'].includes(textAlign) ? textAlign : 'left';
    
    let textX;
    if (ctx.textAlign === "center") {
        textX = x + (w / 2);
    } else if (ctx.textAlign === "right") {
        textX = x + w - pad;
    } else {
        textX = x + pad;
    }

    // Draw the Wrapped Text
    let currentY = y + pad;
    for (const line of lines) {
        if (line) {
            ctx.fillText(line, textX, currentY);
        }
        currentY += lineHeight;
    }

    return canvas;
}