Image Of A Jumping Girl

/**
 * Creates an image of a stylized jumping girl on a simple background.
 * The originalImg parameter is ignored as this function generates a new image from scratch based on the description.
 *
 * @param {Image} originalImg - An Image object, which is ignored by this function.
 * @param {string} [skyColor='#87CEEB'] - The color of the sky.
 * @param {string} [groundColor='#228B22'] - The color of the ground.
 * @param {string} [dressColor='deeppink'] - The color of the girl's dress.
 * @param {string} [skinAndHairColor='black'] - The color for the girl's limbs, head, and hair.
 * @returns {HTMLCanvasElement} A canvas element with the drawing of a jumping girl.
 */
function processImage(originalImg, skyColor = '#87CEEB', groundColor = '#228B22', dressColor = 'deeppink', skinAndHairColor = 'black') {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const width = 400;
    const height = 400;
    canvas.width = width;
    canvas.height = height;

    // 1. Draw Background
    // Sky
    ctx.fillStyle = skyColor;
    ctx.fillRect(0, 0, width, height);

    // Ground
    ctx.fillStyle = groundColor;
    ctx.fillRect(0, height - 80, width, 80);

    // Center point for the girl's body in mid-air
    const centerX = width / 2;
    const centerY = height / 2;

    // Set drawing style for the girl
    ctx.strokeStyle = skinAndHairColor;
    ctx.fillStyle = skinAndHairColor;
    ctx.lineWidth = 6;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';


    // 2. Draw the Girl
    // Legs (bent in a jump)
    // Left Leg
    ctx.beginPath();
    ctx.moveTo(centerX - 10, centerY + 25); // hip
    ctx.lineTo(centerX - 30, centerY + 50); // knee
    ctx.lineTo(centerX - 15, centerY + 75); // foot
    ctx.stroke();

    // Right Leg
    ctx.beginPath();
    ctx.moveTo(centerX + 10, centerY + 25); // hip
    ctx.lineTo(centerX + 30, centerY + 50); // knee
    ctx.lineTo(centerX + 45, centerY + 75); // foot
    ctx.stroke();

    // Arms (up in the air)
    // Left Arm
    ctx.beginPath();
    ctx.moveTo(centerX - 5, centerY - 15); // shoulder
    ctx.lineTo(centerX - 40, centerY - 45); // hand
    ctx.stroke();

    // Right Arm
    ctx.beginPath();
    ctx.moveTo(centerX + 5, centerY - 15); // shoulder
    ctx.lineTo(centerX + 40, centerY - 45); // hand
    ctx.stroke();


    // Torso (Dress)
    ctx.fillStyle = dressColor;
    ctx.beginPath();
    ctx.moveTo(centerX, centerY - 20); // neck
    ctx.lineTo(centerX - 35, centerY + 30); // bottom left
    ctx.lineTo(centerX + 35, centerY + 30); // bottom right
    ctx.closePath();
    ctx.fill();

    // Head and Hair
    ctx.fillStyle = skinAndHairColor;
    // Head
    ctx.beginPath();
    ctx.arc(centerX, centerY - 40, 20, 0, Math.PI * 2);
    ctx.fill();

    // Pigtails
    // Left pigtail
    ctx.beginPath();
    ctx.moveTo(centerX - 18, centerY - 45);
    ctx.quadraticCurveTo(centerX - 35, centerY - 65, centerX - 30, centerY - 40);
    ctx.fill();
    // Right pigtail
    ctx.beginPath();
    ctx.moveTo(centerX + 18, centerY - 45);
    ctx.quadraticCurveTo(centerX + 35, centerY - 65, centerX + 30, centerY - 40);
    ctx.fill();

    return canvas;
}