Photo Text Overlay Adder

function processImage(originalImg, text = "Надпись Фото", fontSize = 60, color = "#FFFFFF", position = "bottom") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

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

    // Prepare text styling properties
    const size = Number(fontSize) || 60;
    ctx.font = `bold ${size}px Arial, sans-serif`;
    ctx.fillStyle = color;
    ctx.textAlign = "center";
    ctx.textBaseline = "top";
    
    // Split text by newlines (supports both actual newlines and encoded \n strings)
    const parsedLines = String(text).replace(/\\n/g, '\n').split('\n');
    const lineHeight = size * 1.2;
    const totalTextHeight = lineHeight * parsedLines.length;

    // Calculate vertical starting position
    let startY = 0;
    const padding = Math.max(20, size * 0.5);

    switch (String(position).toLowerCase().trim()) {
        case "top":
            startY = padding;
            break;
        case "center":
            startY = (canvas.height - totalTextHeight) / 2;
            break;
        case "bottom":
        default:
            startY = canvas.height - totalTextHeight - padding;
            break;
    }

    // X coordinate is centered
    const x = canvas.width / 2;

    // Setup text outline and shadow for better readability over any background
    ctx.lineJoin = "round";
    ctx.miterLimit = 2;
    ctx.lineWidth = Math.max(3, size / 10);
    ctx.strokeStyle = "#000000"; // Black outline by default to make text pop

    // Draw each line of text
    parsedLines.forEach((line, index) => {
        const y = startY + (index * lineHeight);
        
        // Render text outline + drop shadow
        ctx.shadowColor = "rgba(0, 0, 0, 0.7)";
        ctx.shadowBlur = Math.max(2, size / 10);
        ctx.shadowOffsetX = 3;
        ctx.shadowOffsetY = 3;
        ctx.strokeText(line, x, y);
        
        // Render text fill (disable shadow to keep fill crisp inside the stroke)
        ctx.shadowColor = "transparent";
        ctx.fillText(line, x, y);
    });

    return canvas;
}