Image Textbox Adder

function processImage(
    originalImg, 
    text = "Your Text Here", 
    posX = 50, 
    posY = 80, 
    fontSize = 48, 
    fontColor = "#000000", 
    boxColor = "#ffffff", 
    boxOpacity = 0.7, 
    padding = 20, 
    borderRadius = 10
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

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

    // Calculate actual pixel positions based on percentages (0-100)
    const x = (parseFloat(posX) / 100) * canvas.width;
    const y = (parseFloat(posY) / 100) * canvas.height;

    // Setup text styling
    ctx.font = `${fontSize}px Arial, sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Handle multiline text (convert literal '\n' string to actual newline)
    const lines = String(text).replace(/\\n/g, '\n').split('\n');
    let maxWidth = 0;
    
    // Measure the width of the longest text line
    lines.forEach(line => {
        const metrics = ctx.measureText(line);
        if (metrics.width > maxWidth) {
            maxWidth = metrics.width;
        }
    });

    // Calculate bounding box dimensions
    const lineHeight = parseFloat(fontSize) * 1.2;
    const boxWidth = maxWidth + (parseFloat(padding) * 2);
    const boxHeight = (lines.length * lineHeight) + (parseFloat(padding) * 2);

    const boxX = x - (boxWidth / 2);
    const boxY = y - (boxHeight / 2);

    // Draw background textbox with rounded corners
    ctx.save();
    ctx.globalAlpha = parseFloat(boxOpacity);
    ctx.fillStyle = boxColor;
    
    const r = parseFloat(borderRadius);
    ctx.beginPath();
    ctx.moveTo(boxX + r, boxY);
    ctx.lineTo(boxX + boxWidth - r, boxY);
    ctx.quadraticCurveTo(boxX + boxWidth, boxY, boxX + boxWidth, boxY + r);
    ctx.lineTo(boxX + boxWidth, boxY + boxHeight - r);
    ctx.quadraticCurveTo(boxX + boxWidth, boxY + boxHeight, boxX + boxWidth - r, boxY + boxHeight);
    ctx.lineTo(boxX + r, boxY + boxHeight);
    ctx.quadraticCurveTo(boxX, boxY + boxHeight, boxX, boxY + boxHeight - r);
    ctx.lineTo(boxX, boxY + r);
    ctx.quadraticCurveTo(boxX, boxY, boxX + r, boxY);
    ctx.closePath();
    ctx.fill();
    ctx.restore();

    // Draw the text
    ctx.fillStyle = fontColor;
    
    // Calculate starting Y position so the text block is vertically centered in the box
    let startY = boxY + parseFloat(padding) + (lineHeight / 2);
    
    // Draw each line
    lines.forEach(line => {
        ctx.fillText(line, x, startY);
        startY += lineHeight;
    });

    return canvas;
}