Image Advanced Text Adder

function processImage(
    originalImg,
    textStr = "Your Text Here",
    xPct = 50,
    yPct = 80,
    fontSize = 60,
    fontFamily = "Impact, Arial, sans-serif",
    textColor = "#ffffff",
    strokeColor = "#000000",
    strokeWidth = 3,
    shadowColor = "rgba(0, 0, 0, 0.7)",
    shadowBlur = 5,
    shadowOffsetX = 3,
    shadowOffsetY = 3,
    angleDeg = 0,
    opacity = 1.0,
    bgColor = "transparent",
    bgPadding = 20
) {
    // Create a new canvas
    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);

    // Handle string inputs that might contain literal '\n'
    const lines = String(textStr).replace(/\\n/g, '\n').split('\n');

    // Set font sizing and line height
    const baseFontSize = Number(fontSize) || 60;
    const lineHeight = baseFontSize * 1.2;
    const totalTextHeight = lines.length * lineHeight;

    // Define text origin (X and Y coordinates)
    const x = (canvas.width * Number(xPct)) / 100;
    const y = (canvas.height * Number(yPct)) / 100;

    // Isolate context state for transformations
    ctx.save();
    
    // Set global opacity
    ctx.globalAlpha = Math.max(0, Math.min(1, Number(opacity)));
    
    // Translate origin to desired position and apply rotation
    ctx.translate(x, y);
    ctx.rotate((Number(angleDeg) * Math.PI) / 180);

    // Prepare text styling to measure max width
    ctx.font = `${baseFontSize}px ${fontFamily}`;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";

    let maxLineWidth = 0;
    for (let line of lines) {
        let metrics = ctx.measureText(line);
        if (metrics.width > maxLineWidth) {
            maxLineWidth = metrics.width;
        }
    }

    // Optional: Draw a background box behind the text
    if (bgColor && bgColor !== "transparent" && bgColor !== "") {
        ctx.fillStyle = bgColor;
        const bgWidth = maxLineWidth + Number(bgPadding) * 2;
        const bgHeight = totalTextHeight + Number(bgPadding) * 2;
        
        ctx.fillRect(
            -bgWidth / 2,
            -bgHeight / 2,
            bgWidth,
            bgHeight
        );
    }

    // Configure text shadow options
    ctx.shadowColor = shadowColor;
    ctx.shadowBlur = Number(shadowBlur);
    ctx.shadowOffsetX = Number(shadowOffsetX);
    ctx.shadowOffsetY = Number(shadowOffsetY);
    ctx.lineJoin = "round"; // Smoothes the stroke corners

    // Calculate vertical starting point to perfectly center multi-line text
    const startY = -(totalTextHeight / 2) + (lineHeight / 2);

    // Draw each line of text
    for (let i = 0; i < lines.length; i++) {
        const lineY = startY + i * lineHeight;

        ctx.font = `${baseFontSize}px ${fontFamily}`;
        
        // Render Stroke (Outline)
        const sWidth = Number(strokeWidth);
        if (sWidth > 0 && strokeColor !== "transparent" && strokeColor !== "") {
            ctx.lineWidth = sWidth;
            ctx.strokeStyle = strokeColor;
            ctx.strokeText(lines[i], 0, lineY);
            
            // Turn off shadow temporarily so fill step doesn't double-darken the shadow
            ctx.shadowColor = "transparent";
        }

        // Render Fill (Inner text)
        ctx.fillStyle = textColor;
        ctx.fillText(lines[i], 0, lineY);

        // Turn shadow back on for the next line's stroke
        ctx.shadowColor = shadowColor;
    }

    // Restore context state to avoid bleeding styles
    ctx.restore();

    return canvas;
}