Image Bulk Date And Location Stamp Adder Without Background Color

function processImage(
    originalImg,
    dateString = new Date().toLocaleDateString(),
    locationString = "My Location",
    position = "bottom-right",
    fontSize = 36,
    fontColor = "#FFFFFF",
    shadowColor = "#000000",
    fontFamily = "Arial",
    margin = 20,
    stampOrder = "date-first"
) {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the image's original size
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // Prepare the text lines to be stamped, filtering out any empty strings
    const lines = [];
    const sanitizedDate = typeof dateString === 'string' ? dateString.trim() : '';
    const sanitizedLocation = typeof locationString === 'string' ? locationString.trim() : '';

    if (stampOrder === 'date-first') {
        if (sanitizedDate) lines.push(sanitizedDate);
        if (sanitizedLocation) lines.push(sanitizedLocation);
    } else {
        if (sanitizedLocation) lines.push(sanitizedLocation);
        if (sanitizedDate) lines.push(sanitizedDate);
    }

    // If there's no text to stamp, return the canvas with just the original image
    if (lines.length === 0) {
        return canvas;
    }

    // Set up text styling
    // Quote fontFamily to handle font names with spaces, e.g., "Times New Roman"
    ctx.font = `bold ${fontSize}px "${fontFamily}", sans-serif`;
    ctx.fillStyle = fontColor;

    // Add a text shadow for better readability on various backgrounds,
    // which is a good alternative to a solid background color.
    ctx.shadowColor = shadowColor;
    ctx.shadowBlur = 5;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;

    const lineHeight = fontSize * 1.2;

    // --- Calculate Text Position ---
    let x;

    // 1. Set horizontal alignment and determine the x-coordinate
    if (position.includes('left')) {
        ctx.textAlign = 'left';
        x = margin;
    } else if (position.includes('right')) {
        ctx.textAlign = 'right';
        x = canvas.width - margin;
    } else { // 'center', 'top-center', 'bottom-center'
        ctx.textAlign = 'center';
        x = canvas.width / 2;
    }

    // 2. Set vertical alignment and draw the text lines
    if (position.includes('top')) {
        ctx.textBaseline = 'top';
        let currentY = margin;
        for (let i = 0; i < lines.length; i++) {
            ctx.fillText(lines[i], x, currentY);
            currentY += lineHeight;
        }
    } else if (position.includes('bottom')) {
        ctx.textBaseline = 'bottom';
        let currentY = canvas.height - margin;
        // Loop backwards through lines to draw from the bottom-up
        for (let i = lines.length - 1; i >= 0; i--) {
            ctx.fillText(lines[i], x, currentY);
            currentY -= lineHeight;
        }
    } else { // 'center'
        // For multi-line text, it's easiest to calculate from the top of the text block
        ctx.textBaseline = 'top';
        // Calculate the total height of the text block for vertical centering
        const totalBlockHeight = (lines.length * lineHeight) - (lineHeight - fontSize);
        let startY = (canvas.height - totalBlockHeight) / 2;
        
        let currentY = startY;
        for (let i = 0; i < lines.length; i++) {
            ctx.fillText(lines[i], x, currentY);
            currentY += lineHeight;
        }
    }

    // Return the final canvas element, which can be displayed directly
    return canvas;
}