// Title: Zany Zebra Tea Party



ctx.fillStyle = "#FCCF8F"; // Setting the background color to a warm shade of yellow

ctx.fillRect(0, 0, 512, 512); // Filling the entire canvas with the background color



// Drawing Mrs Zebra teaching Peppa, George, Zoe, Zaza & Zuzu Zebra

ctx.fillStyle = "#000000"; // Setting the fill color to black

ctx.beginPath(); // Starting a new path



// Drawing Mrs Zebra's body

ctx.moveTo(200, 300); // Moving to the starting point of the body

ctx.lineTo(250, 250); // Drawing the body's upper line

ctx.lineTo(300, 300); // Drawing the body's lower line

ctx.lineTo(200, 300); // Drawing the body's closing line



// Drawing Mrs Zebra's head

ctx.moveTo(250, 250); // Moving to the starting point of the head

ctx.lineTo(200, 200); // Drawing the head's left line

ctx.lineTo(300, 200); // Drawing the head's right line

ctx.lineTo(350, 250); // Drawing the head's upper line

ctx.lineTo(250, 250); // Drawing the head's closing line



ctx.closePath(); // Closing the path

ctx.fill(); // Filling Mrs Zebra's body and head with black color



// Drawing Peppa, George, Zoe, Zaza & Zuzu Zebra

ctx.fillStyle = "#F4A7B9"; // Setting the fill color to Peppa's favorite pink



// Drawing Peppa

ctx.beginPath(); // Starting a new path

ctx.arc(175, 300, 25, 0, Math.PI * 2); // Drawing Peppa's head

ctx.closePath(); // Closing the path

ctx.fill(); // Filling Peppa's head with pink color



// Drawing George

ctx.beginPath(); // Starting a new path

ctx.arc(225, 300, 25, 0, Math.PI * 2); // Drawing George's head

ctx.closePath(); // Closing the path

ctx.fill(); // Filling George's head with pink color



// Drawing Zoe

ctx.beginPath(); // Starting a new path

ctx.arc(275, 300, 25, 0, Math.PI * 2); // Drawing Zoe's head

ctx.closePath(); // Closing the path

ctx.fill(); // Filling Zoe's head with pink color



// Drawing Zaza

ctx.beginPath(); // Starting a new path

ctx.arc(325, 300, 25, 0, Math.PI * 2); // Drawing Zaza's head

ctx.closePath(); // Closing the path

ctx.fill(); // Filling Zaza's head with pink color



// Drawing Zuzu Zebra

ctx.beginPath(); // Starting a new path

ctx.arc(375, 300, 25, 0, Math.PI * 2); // Drawing Zuzu's head

ctx.closePath(); // Closing the path

ctx.fill(); // Filling Zuzu's head with pink color



// Drawing the clay tea set

ctx.fillStyle = "#D2B48C"; // Setting the fill color to a sandy brown



// Drawing the teapot

ctx.fillRect(100, 100, 50, 70); // Drawing the teapot's body

ctx.fillRect(75, 115, 100, 40); // Drawing the teapot's handle

ctx.fillRect(150, 120, 20, 30); // Drawing the teapot's spout



// Drawing the teacups

ctx.fillRect(250, 120, 30, 40); // Drawing the first teacup

ctx.fillRect(300, 120, 30, 40); // Drawing the second teacup



// Drawing Miss Rabbit's sister, Mummy Rabbit, and the other adults

ctx.fillStyle = "#A9D18E"; // Setting the fill color to a leafy green



// Drawing Mummy Rabbit

ctx.beginPath(); // Starting a new path

ctx.arc(75, 400, 25, 0, Math.PI * 2); // Drawing Mummy Rabbit's head

ctx.closePath(); // Closing the path

ctx.fill(); // Filling Mummy Rabbit's head with green color



// Drawing other adults

ctx.beginPath(); // Starting a new path

ctx.arc(125, 400, 25, 0, Math.PI * 2); // Drawing the first adult's head

ctx.closePath(); // Closing the path

ctx.fill(); // Filling the first adult's head with green color



ctx.beginPath(); // Starting a new path

ctx.arc(175, 400, 25, 0, Math.PI * 2); // Drawing the second adult's head

ctx.closePath(); // Closing the path

ctx.fill(); // Filling the second adult's head with green color



// Miss Rabbit is hurt, so let's add a bandage to her ankle

ctx.strokeStyle = "#000000"; // Setting the stroke color to black

ctx.lineWidth = 3; // Setting the stroke width to 3 pixels



ctx.beginPath(); // Starting a new path

ctx.moveTo(400, 450); // Moving to the starting point of the bandage

ctx.lineTo(430, 470); // Drawing the first part of the bandage

ctx.lineTo(460, 450); // Drawing the second part of the bandage

ctx.stroke(); // Drawing the bandage



// Oops! The bandage looks more like a snake... Let's fix it!

ctx.beginPath(); // Starting a new path

ctx.arc(430, 460, 10, 0, Math.PI * 2); // Drawing the missing part of the bandage

ctx.stroke(); // Drawing the missing part of the bandage



// And there we have it, a zany zebra tea party with a touch of chaos!

// "I guess Miss Rabbit's bandage turned into a friendly snake! Watch out for its healing bites!"