Image Location Tagger

async function processImage(originalImg, locationText = 'Your Location Here', position = 'bottom-right', fontSize = 24, fontColor = '#FFFFFF', fontFamily = 'Arial, sans-serif', backgroundColor = 'rgba(0, 0, 0, 0.5)', padding = 10) {
    
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    const ctx = canvas.getContext('2d');

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

    // --- Prepare to draw the tag ---

    const font = `${fontSize}px ${fontFamily}`;
    ctx.font = font;

    // Set properties for the tag elements
    const iconSize = fontSize * 1.2;
    const iconPadding = padding / 2;
    const margin = padding; // Margin from the image edge
    
    // Measure text to calculate the size of the tag
    const textMetrics = ctx.measureText(locationText);
    const textWidth = textMetrics.width;
    
    const tagWidth = padding + iconSize + iconPadding + textWidth + padding;
    const tagHeight = fontSize + (padding * 2);

    // --- Calculate the position of the tag ---

    let x, y;

    switch (position.toLowerCase()) {
        case 'top-left':
            x = margin;
            y = margin;
            break;
        case 'top-center':
            x = (canvas.width - tagWidth) / 2;
            y = margin;
            break;
        case 'top-right':
            x = canvas.width - tagWidth - margin;
            y = margin;
            break;
        case 'center':
            x = (canvas.width - tagWidth) / 2;
            y = (canvas.height - tagHeight) / 2;
            break;
        case 'bottom-left':
            x = margin;
            y = canvas.height - tagHeight - margin;
            break;
        case 'bottom-center':
            x = (canvas.width - tagWidth) / 2;
            y = canvas.height - tagHeight - margin;
            break;
        case 'bottom-right':
        default:
            x = canvas.width - tagWidth - margin;
            y = canvas.height - tagHeight - margin;
            break;
    }

    // --- Draw the tag background (a rounded rectangle) ---

    ctx.fillStyle = backgroundColor;
    const cornerRadius = 5;
    ctx.beginPath();
    ctx.moveTo(x + cornerRadius, y);
    ctx.lineTo(x + tagWidth - cornerRadius, y);
    ctx.quadraticCurveTo(x + tagWidth, y, x + tagWidth, y + cornerRadius);
    ctx.lineTo(x + tagWidth, y + tagHeight - cornerRadius);
    ctx.quadraticCurveTo(x + tagWidth, y + tagHeight, x + tagWidth - cornerRadius, y + tagHeight);
    ctx.lineTo(x + cornerRadius, y + tagHeight);
    ctx.quadraticCurveTo(x, y + tagHeight, x, y + tagHeight - cornerRadius);
    ctx.lineTo(x, y + cornerRadius);
    ctx.quadraticCurveTo(x, y, x + cornerRadius, y);
    ctx.closePath();
    ctx.fill();

    // --- Draw the location pin icon ---

    const iconCenterX = x + padding + iconSize / 2;
    const iconCenterY = y + tagHeight / 2;
    const headRadius = iconSize / 3.5;
    const bodyHeight = iconSize * 0.6;
    const headCenterY = iconCenterY - (bodyHeight / 2) + headRadius;
    const tipY = iconCenterY + (bodyHeight / 2);

    ctx.fillStyle = fontColor;
    ctx.beginPath();
    // A path for a classic map pin (teardrop shape)
    ctx.moveTo(iconCenterX, tipY); // Start at the tip
    ctx.bezierCurveTo(
        iconCenterX - headRadius * 1.6, headCenterY + headRadius * 0.7,
        iconCenterX - headRadius * 1.1, headCenterY - headRadius,
        iconCenterX, headCenterY - headRadius
    );
    ctx.bezierCurveTo(
        iconCenterX + headRadius * 1.1, headCenterY - headRadius,
        iconCenterX + headRadius * 1.6, headCenterY + headRadius * 0.7,
        iconCenterX, tipY
    );
    ctx.closePath();
    ctx.fill();

    // Draw the "hole" in the pin's head
    ctx.fillStyle = backgroundColor;
    ctx.beginPath();
    ctx.arc(iconCenterX, headCenterY, headRadius / 2, 0, Math.PI * 2);
    ctx.fill();

    // --- Draw the location text ---

    ctx.fillStyle = fontColor;
    ctx.font = font;
    ctx.textBaseline = 'middle';
    
    const textX = x + padding + iconSize + iconPadding;
    const textY = y + tagHeight / 2;
    ctx.fillText(locationText, textX, textY);

    // Return the final canvas
    return canvas;
}