Image Of A Bald Black Man

function processImage(originalImg, backgroundColor = "#ffb347", customWidth = "800", customHeight = "800", overlayScale = "1") {
    const canvas = document.createElement('canvas');
    let width = parseInt(customWidth, 10);
    let height = parseInt(customHeight, 10);

    // If an original image is provided, use its dimensions
    if (originalImg && originalImg.complete && originalImg.naturalWidth) {
        width = originalImg.naturalWidth;
        height = originalImg.naturalHeight;
    }

    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Draw background
    if (originalImg && originalImg.complete && originalImg.naturalWidth) {
        ctx.drawImage(originalImg, 0, 0, width, height);
    } else {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, width, height);
    }

    // Set up responsive scaling for the character
    const cx = width / 2;
    const cy = height / 2;
    const baseScale = Math.min(width, height) / 400;
    const finalScale = baseScale * parseFloat(overlayScale);

    ctx.save();
    ctx.translate(cx, cy + (20 * finalScale)); // slightly lower to accommodate torso
    ctx.scale(finalScale, finalScale);

    // Shoulders and Torso
    ctx.fillStyle = '#1a1a1a'; // Dark grey / black shirt
    ctx.beginPath();
    ctx.moveTo(-160, 200);
    ctx.quadraticCurveTo(-140, 70, -60, 70);
    ctx.lineTo(60, 70);
    ctx.quadraticCurveTo(140, 70, 160, 200);
    ctx.fill();

    // Neck shadow / base
    ctx.fillStyle = '#261208';
    ctx.fillRect(-35, 30, 70, 50);

    // Head Base (Dome/Oval shape)
    const headGradient = ctx.createRadialGradient(-15, -70, 10, 0, -20, 100);
    headGradient.addColorStop(0, '#5A341E'); // highlight side
    headGradient.addColorStop(0.7, '#3D2214'); // mid shade
    headGradient.addColorStop(1, '#241208'); // shadow rim
    ctx.fillStyle = headGradient;
    
    ctx.beginPath();
    ctx.ellipse(0, -35, 80, 105, 0, 0, Math.PI * 2);
    ctx.fill();

    // Bald Head Glare (Reflection that gives the bald effect)
    ctx.fillStyle = 'rgba(255, 255, 255, 0.12)';
    ctx.beginPath();
    ctx.ellipse(-35, -95, 25, 10, -0.35, 0, Math.PI * 2);
    ctx.fill();
    ctx.beginPath();
    ctx.ellipse(-55, -70, 8, 20, -0.4, 0, Math.PI * 2);
    ctx.fill();

    // Ears
    ctx.fillStyle = '#3D2214';
    ctx.beginPath();
    ctx.ellipse(-80, -20, 14, 26, -0.2, 0, Math.PI * 2);
    ctx.fill();
    ctx.beginPath();
    ctx.ellipse(80, -20, 14, 26, 0.2, 0, Math.PI * 2);
    ctx.fill();

    // Inner ear shading
    ctx.fillStyle = '#241208';
    ctx.beginPath();
    ctx.ellipse(-82, -20, 6, 14, -0.2, 0, Math.PI * 2);
    ctx.fill();
    ctx.beginPath();
    ctx.ellipse(82, -20, 6, 14, 0.2, 0, Math.PI * 2);
    ctx.fill();

    // Eyes - Whites
    ctx.fillStyle = '#f0f0f0';
    ctx.beginPath();
    ctx.ellipse(-32, -35, 18, 10, 0.05, 0, Math.PI * 2);
    ctx.fill();
    ctx.beginPath();
    ctx.ellipse(32, -35, 18, 10, -0.05, 0, Math.PI * 2);
    ctx.fill();

    // Eyes - Irises / Pupils
    ctx.fillStyle = '#120803';
    ctx.beginPath();
    ctx.arc(-32, -35, 7, 0, Math.PI * 2);
    ctx.arc(32, -35, 7, 0, Math.PI * 2);
    ctx.fill();

    // Eye catchlights (reflection)
    ctx.fillStyle = '#ffffff';
    ctx.beginPath();
    ctx.arc(-34, -37, 2, 0, Math.PI * 2);
    ctx.arc(30, -37, 2, 0, Math.PI * 2);
    ctx.fill();

    // Eyebrows
    ctx.strokeStyle = '#120803';
    ctx.lineWidth = 6;
    ctx.lineCap = 'round';
    
    // Left Eyebrow
    ctx.beginPath();
    ctx.moveTo(-56, -55);
    ctx.quadraticCurveTo(-34, -62, -14, -50);
    ctx.stroke();

    // Right Eyebrow
    ctx.beginPath();
    ctx.moveTo(56, -55);
    ctx.quadraticCurveTo(34, -62, 14, -50);
    ctx.stroke();

    // Nose
    ctx.fillStyle = '#2A170C';
    ctx.beginPath();
    ctx.moveTo(0, -25);
    ctx.quadraticCurveTo(6, -10, 16, 14);
    ctx.quadraticCurveTo(22, 22, 10, 24);
    ctx.lineTo(-10, 24);
    ctx.quadraticCurveTo(-22, 22, -16, 14);
    ctx.quadraticCurveTo(-6, -10, 0, -25);
    ctx.fill();

    // Nose bridge highlight
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.06)';
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.moveTo(0, -20);
    ctx.lineTo(0, 12);
    ctx.stroke();

    // Nostrils
    ctx.fillStyle = '#120803';
    ctx.beginPath();
    ctx.ellipse(-14, 18, 6, 3, 0.2, 0, Math.PI * 2);
    ctx.ellipse(14, 18, 6, 3, -0.2, 0, Math.PI * 2);
    ctx.fill();

    // Mouth - Top Lip
    ctx.fillStyle = '#291408';
    ctx.beginPath();
    ctx.moveTo(-28, 46);
    ctx.quadraticCurveTo(0, 40, 28, 46);
    ctx.quadraticCurveTo(0, 50, -28, 46);
    ctx.fill();

    // Mouth - Bottom Lip
    ctx.fillStyle = '#3E2113';
    ctx.beginPath();
    ctx.moveTo(-26, 47);
    ctx.quadraticCurveTo(0, 62, 26, 47);
    ctx.quadraticCurveTo(0, 52, -26, 47);
    ctx.fill();

    // Goatee/Beard (Optional style addition to define jaw character)
    ctx.fillStyle = '#140c08';
    ctx.beginPath();
    ctx.moveTo(-35, 45);
    ctx.quadraticCurveTo(-45, 75, 0, 85);
    ctx.quadraticCurveTo(45, 75, 35, 45);
    ctx.quadraticCurveTo(25, 70, 0, 70);
    ctx.quadraticCurveTo(-25, 70, -35, 45);
    ctx.fill();

    ctx.restore();

    return canvas;
}