Image Contact Photo Adder

async function processImage(originalImg, name = 'Jane Doe', phoneNumber = '+1 (555) 123-4567') {
    /**
     * Dynamically loads the 'Roboto' font from Google Fonts.
     * Uses a window flag to ensure the font is loaded only once.
     */
    const loadFont = async () => {
        if (window.robotoFontLoaded) {
            return;
        }
        try {
            const font = new FontFace('Roboto', 'url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2)');
            await font.load();
            document.fonts.add(font);
            window.robotoFontLoaded = true;
        } catch (e) {
            console.error("Roboto font failed to load. Using default sans-serif.", e);
        }
    };

    await loadFont();

    // Define canvas dimensions and colors
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = 400;
    const height = 480;
    const backgroundColor = '#ffffff';
    const primaryTextColor = '#202124';
    const secondaryTextColor = '#5f6368';
    const accentColor = '#1a73e8';
    const dividerColor = '#dadce0';

    canvas.width = width;
    canvas.height = height;

    // 1. Draw the background
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, width, height);

    // 2. Draw Header
    ctx.fillStyle = primaryTextColor;
    ctx.font = '22px Roboto, sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('Create contact', width / 2, 50);

    // 3. Draw Profile Picture
    const picCenterX = width / 2;
    const picCenterY = 140;
    const radius = 65;

    // Draw placeholder circle & icon
    ctx.beginPath();
    ctx.arc(picCenterX, picCenterY, radius, 0, 2 * Math.PI);
    ctx.fillStyle = '#f1f3f4';
    ctx.fill();

    ctx.fillStyle = accentColor;
    ctx.font = '50px Roboto, sans-serif';
    ctx.fillText('📷', picCenterX, picCenterY);

    // Clip to a circle and draw the user-provided image
    ctx.save();
    ctx.beginPath();
    ctx.arc(picCenterX, picCenterY, radius, 0, Math.PI * 2, true);
    ctx.clip();

    // Calculate cropping to fit the image into the circular frame
    const aspect = originalImg.width / originalImg.height;
    let sx, sy, sWidth, sHeight;
    const diameter = radius * 2;

    if (aspect > 1) { // Landscape image
        sHeight = originalImg.height;
        sWidth = sHeight;
        sx = (originalImg.width - sWidth) / 2;
        sy = 0;
    } else { // Portrait or square image
        sWidth = originalImg.width;
        sHeight = sWidth;
        sx = 0;
        sy = (originalImg.height - sHeight) / 2;
    }

    ctx.drawImage(originalImg, sx, sy, sWidth, sHeight, picCenterX - radius, picCenterY - radius, diameter, diameter);
    ctx.restore();

    // 4. Draw Input Fields
    const fieldStartX = 40;
    const fieldEndX = width - 40;
    const textStartX = fieldStartX + 45;

    // Helper function to draw a styled input field
    const drawField = (y, icon, value) => {
        // Draw Icon
        ctx.fillStyle = secondaryTextColor;
        ctx.font = '24px Roboto, sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText(icon, fieldStartX + 10, y + 25);

        // Draw Text Value
        ctx.fillStyle = primaryTextColor;
        ctx.font = '16px Roboto, sans-serif';
        ctx.textAlign = 'left';
        ctx.fillText(value, textStartX, y + 25);

        // Draw Underline
        ctx.beginPath();
        ctx.moveTo(fieldStartX, y + 50);
        ctx.lineTo(fieldEndX, y + 50);
        ctx.strokeStyle = dividerColor;
        ctx.lineWidth = 1.5;
        ctx.stroke();
    };

    // Draw Name Field
    let currentY = picCenterY + radius + 40;
    drawField(currentY, '👤', name);

    // Draw Phone Field
    currentY += 70;
    drawField(currentY, '📞', phoneNumber);


    // 5. Draw Save Button
    const buttonY = height - 70;
    const buttonWidth = 120;
    const buttonHeight = 40;
    const buttonX = (width - buttonWidth) / 2;
    const buttonRadius = 20;

    // Draw button shape
    ctx.beginPath();
    ctx.moveTo(buttonX + buttonRadius, buttonY);
    ctx.arcTo(buttonX + buttonWidth, buttonY, buttonX + buttonWidth, buttonY + buttonHeight, buttonRadius);
    ctx.arcTo(buttonX + buttonWidth, buttonY + buttonHeight, buttonX, buttonY + buttonHeight, buttonRadius);
    ctx.arcTo(buttonX, buttonY + buttonHeight, buttonX, buttonY, buttonRadius);
    ctx.arcTo(buttonX, buttonY, buttonX + buttonWidth, buttonY, buttonRadius);
    ctx.closePath();
    ctx.fillStyle = accentColor;
    ctx.fill();

    // Draw button text
    ctx.fillStyle = '#ffffff';
    ctx.font = 'bold 16px Roboto, sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText('Save', width / 2, buttonY + buttonHeight / 2);

    return canvas;
}