Image Language Name Picker Tool Creator

function processImage(originalImg, name = "Jane Doe", language = "English", badgeColor = "#e74c3c", position = "bottom") {
    // Create canvas matching the original image dimensions
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');

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

    // Determine dimensions for the overlay badge
    const badgeWidth = canvas.width * 0.8;
    const badgeHeight = Math.min(canvas.height * 0.5, Math.max(100, canvas.height * 0.25));
    const badgeX = (canvas.width - badgeWidth) / 2;
    
    // Calculate Y position based on preference
    let badgeY = 0;
    if (position.toLowerCase() === "top") {
        badgeY = canvas.height * 0.05;
    } else if (position.toLowerCase() === "center") {
        badgeY = (canvas.height - badgeHeight) / 2;
    } else { // default to bottom
        badgeY = canvas.height - badgeHeight - (canvas.height * 0.05);
    }

    // Helper to draw a rounded rectangle (smooth fallback for older browsers)
    const drawRoundRect = (x, y, w, h, radius) => {
        ctx.beginPath();
        if (ctx.roundRect) {
            ctx.roundRect(x, y, w, h, radius);
        } else {
            ctx.moveTo(x + radius, y);
            ctx.lineTo(x + w - radius, y);
            ctx.quadraticCurveTo(x + w, y, x + w, y + radius);
            ctx.lineTo(x + w, y + h - radius);
            ctx.quadraticCurveTo(x + w, y + h, x + w - radius, y + h);
            ctx.lineTo(x + radius, y + h);
            ctx.quadraticCurveTo(x, y + h, x, y + h - radius);
            ctx.lineTo(x, y + radius);
            ctx.quadraticCurveTo(x, y, x + radius, y);
        }
    };

    // Draw shadow
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
    ctx.shadowBlur = 15;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 10;

    // Draw main white badge background
    drawRoundRect(badgeX, badgeY, badgeWidth, badgeHeight, 20);
    ctx.fillStyle = '#ffffff';
    ctx.fill();

    // Reset shadow to avoid applying it to text and internal panels
    ctx.shadowBlur = 0;
    ctx.shadowColor = 'transparent';

    const headerHeight = badgeHeight * 0.35;
    const footerHeight = badgeHeight * 0.25;

    // Draw colored header and footer backgrounds (clipped to maintain rounded corners)
    ctx.save();
    drawRoundRect(badgeX, badgeY, badgeWidth, badgeHeight, 20);
    ctx.clip();

    ctx.fillStyle = badgeColor;
    // Header Panel
    ctx.fillRect(badgeX, badgeY, badgeWidth, headerHeight);
    // Footer Panel
    ctx.fillRect(badgeX, badgeY + badgeHeight - footerHeight, badgeWidth, footerHeight);
    ctx.restore();

    // Prepare centered text coordinates
    const cx = badgeX + badgeWidth / 2;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // 1. Header Text
    ctx.fillStyle = '#ffffff';
    let fontSize = headerHeight * 0.45;
    ctx.font = `bold ${fontSize}px "Arial Black", Arial, sans-serif`;
    ctx.fillText("HELLO", cx, badgeY + headerHeight * 0.35);
    
    fontSize = headerHeight * 0.25;
    ctx.font = `${fontSize}px Arial, sans-serif`;
    ctx.fillText("MY NAME IS", cx, badgeY + headerHeight * 0.75);

    // 2. Name Text (Middle part)
    ctx.fillStyle = '#000000';
    fontSize = (badgeHeight - headerHeight - footerHeight) * 0.6;
    ctx.font = `bold ${fontSize}px "Comic Sans MS", "Marker Felt", "Caveat", cursive, sans-serif`;
    
    // Fit text within bounds to avoid overflow horizontally
    const maxTextWidth = badgeWidth * 0.9;
    ctx.fillText(name, cx, badgeY + headerHeight + (badgeHeight - headerHeight - footerHeight) / 2, maxTextWidth);

    // 3. Footer Language Text
    ctx.fillStyle = '#ffffff';
    fontSize = footerHeight * 0.45;
    ctx.font = `bold ${fontSize}px "Trebuchet MS", Arial, sans-serif`;
    ctx.fillText(`LANGUAGE: ${language.toUpperCase()}`, cx, badgeY + badgeHeight - footerHeight / 2, maxTextWidth);

    return canvas;
}