Image Text Adder

function processImage(originalImg, text = "Your Text Here", textColor = "#FFFFFF", textSize = 48, position = "bottom") {
    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 the text to support both literal newline characters and escaped '\n'
    const resolvedText = text.replace(/\\n/g, '\n');
    const lines = resolvedText.split('\n');

    // Configure text styling
    ctx.font = `bold ${textSize}px Arial, sans-serif`;
    ctx.fillStyle = textColor;
    ctx.textAlign = "center";
    
    // Add a stroke outline to ensure text is visible on varying backgrounds
    ctx.strokeStyle = (textColor.toLowerCase() === "#ffffff" || textColor.toLowerCase() === "white") ? "#000000" : "#FFFFFF";
    ctx.lineWidth = Math.max(2, textSize / 10);
    ctx.lineJoin = "round";

    const x = canvas.width / 2;
    const lineHeight = textSize * 1.2;
    let y;

    // Determine starting Y position based on desired position
    switch (position.toLowerCase()) {
        case "top":
            ctx.textBaseline = "top";
            y = 20; // Some padding from the top
            break;
        case "center":
        case "middle":
            ctx.textBaseline = "middle";
            y = canvas.height / 2;
            break;
        case "bottom":
        default:
            ctx.textBaseline = "bottom";
            y = canvas.height - 20; // Some padding from the bottom
            break;
    }

    // Adjust Y start point if there are multiple lines
    let startY = y;
    if (position.toLowerCase() === "bottom") {
        startY = y - (lines.length - 1) * lineHeight;
    } else if (position.toLowerCase() === "center" || position.toLowerCase() === "middle") {
        startY = y - ((lines.length - 1) * lineHeight) / 2;
    }

    // Draw each line of text
    lines.forEach((line, index) => {
        const currentY = startY + (index * lineHeight);
        ctx.strokeText(line, x, currentY); // Draw outline first
        ctx.fillText(line, x, currentY);   // Fill text over the outline
    });

    return canvas;
}