Image Text Field Creator Studio

function processImage(
    originalImg,
    text = "Текстовое поле",
    x = 50,
    y = 50,
    fontSize = 48,
    fontColor = "#FFFFFF",
    bgColor = "rgba(0, 0, 0, 0.6)",
    padding = 20,
    fontFamily = "sans-serif"
) {
    // Create canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set dimensions to match original image
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

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

    // Type casting to ensure parameters behave correctly
    x = Number(x);
    y = Number(y);
    fontSize = Number(fontSize);
    padding = Number(padding);
    text = String(text);

    // Parse multiline text (supporting both actual line breaks and escaped \n)
    const lines = text.split(/\\n|\n/);
    
    // Configure text styling
    ctx.font = `${fontSize}px ${fontFamily}`;
    ctx.textBaseline = 'top';

    // Calculate bounding box dimensions for the text field
    let maxWidth = 0;
    const lineHeight = fontSize * 1.2;
    const totalHeight = lines.length * lineHeight;

    for (let i = 0; i < lines.length; i++) {
        const metrics = ctx.measureText(lines[i]);
        if (metrics.width > maxWidth) {
            maxWidth = metrics.width;
        }
    }

    // Draw the background "text field" box if configured
    if (bgColor && bgColor !== 'transparent') {
        ctx.fillStyle = bgColor;
        
        const rectX = x - padding;
        const rectY = y - padding;
        const rectW = maxWidth + padding * 2;
        const rectH = totalHeight + padding * 2;
        
        // Draw a rounded rectangle for a more polished "studio" feel
        const radius = Math.min(12, rectW / 2, rectH / 2);
        
        ctx.beginPath();
        ctx.moveTo(rectX + radius, rectY);
        ctx.lineTo(rectX + rectW - radius, rectY);
        ctx.quadraticCurveTo(rectX + rectW, rectY, rectX + rectW, rectY + radius);
        ctx.lineTo(rectX + rectW, rectY + rectH - radius);
        ctx.quadraticCurveTo(rectX + rectW, rectY + rectH, rectX + rectW - radius, rectY + rectH);
        ctx.lineTo(rectX + radius, rectY + rectH);
        ctx.quadraticCurveTo(rectX, rectY + rectH, rectX, rectY + rectH - radius);
        ctx.lineTo(rectX, rectY + radius);
        ctx.quadraticCurveTo(rectX, rectY, rectX + radius, rectY);
        ctx.closePath();
        ctx.fill();
    }

    // Draw the actual text overlay
    ctx.fillStyle = fontColor;
    for (let i = 0; i < lines.length; i++) {
        const lineY = y + i * lineHeight;
        ctx.fillText(lines[i], x, lineY);
    }

    // Return the resulting canvas
    return canvas;
}