// Five Grinches Gossiping



// Creating the canvas



// Getting the 2d context



// Drawing the background

ctx.fillStyle = '#66cdaa';

ctx.fillRect(0, 0, 512, 512);



// Drawing the Grinches

const grinchWidth = 100;

const grinchHeight = 150;



// First Grinch

ctx.fillStyle = '#5f9ea0'; // Cyan

ctx.fillRect(50, 50, grinchWidth, grinchHeight);



// Second Grinch

ctx.fillStyle = '#ff0000'; // Red

ctx.fillRect(200, 50, grinchWidth, grinchHeight);



// Third Grinch

ctx.fillStyle = '#ffa500'; // Orange

ctx.fillRect(350, 50, grinchWidth, grinchHeight);



// Fourth Grinch

ctx.fillStyle = '#ff69b4'; // Pink

ctx.fillRect(150, 250, grinchWidth, grinchHeight);



// Fifth Grinch

ctx.fillStyle = '#800080'; // Purple

ctx.fillRect(300, 250, grinchWidth, grinchHeight);



// Adding some details

ctx.fillStyle = '#ffffff'; // White



// First Grinch's mouth

ctx.fillRect(80, 150, 40, 20);



// Second Grinch's mouth

ctx.fillRect(230, 150, 40, 20);



// Third Grinch's mouth

ctx.fillRect(380, 150, 40, 20);



// Fourth Grinch's mouth

ctx.fillRect(180, 350, 40, 20);



// Fifth Grinch's mouth

ctx.fillRect(330, 350, 40, 20);



// Adding some eyes

ctx.fillStyle = '#000000'; // Black



// First Grinch's eyes

ctx.fillRect(70, 100, 20, 20);

ctx.fillRect(110, 100, 20, 20);



// Second Grinch's eyes

ctx.fillRect(220, 100, 20, 20);

ctx.fillRect(260, 100, 20, 20);



// Third Grinch's eyes

ctx.fillRect(370, 100, 20, 20);

ctx.fillRect(410, 100, 20, 20);



// Fourth Grinch's eyes

ctx.fillRect(170, 300, 20, 20);

ctx.fillRect(210, 300, 20, 20);



// Fifth Grinch's eyes

ctx.fillRect(320, 300, 20, 20);

ctx.fillRect(360, 300, 20, 20);



// Adding some eyebrows

ctx.fillStyle = '#964b00'; // Brown



// First Grinch's eyebrows

ctx.fillRect(60, 80, 80, 10);



// Second Grinch's eyebrows

ctx.fillRect(210, 80, 80, 10);



// Third Grinch's eyebrows

ctx.fillRect(360, 80, 80, 10);



// Fourth Grinch's eyebrows

ctx.fillRect(160, 280, 80, 10);



// Fifth Grinch's eyebrows

ctx.fillRect(310, 280, 80, 10);



// Adding some noses

ctx.fillStyle = '#ffcccb'; // Light Pink



// First Grinch's nose

ctx.fillRect(80, 130, 40, 20);



// Second Grinch's nose

ctx.fillRect(230, 130, 40, 20);



// Third Grinch's nose

ctx.fillRect(380, 130, 40, 20);



// Fourth Grinch's nose

ctx.fillRect(180, 330, 40, 20);



// Fifth Grinch's nose

ctx.fillRect(330, 330, 40, 20);



// Adding some tongues

ctx.fillStyle = '#ff69b4'; // Pink



// First Grinch's tongue

ctx.fillRect(80, 180, 40, 40);



// Second Grinch's tongue

ctx.fillRect(230, 180, 40, 40);



// Third Grinch's tongue

ctx.fillRect(380, 180, 40, 40);



// Fourth Grinch's tongue

ctx.fillRect(180, 380, 40, 40);



// Fifth Grinch's tongue

ctx.fillRect(330, 380, 40, 40);



// Adding some speech bubbles

ctx.fillStyle = '#ffffff'; // White



// First Grinch's speech bubble

ctx.beginPath();

ctx.moveTo(200, 50);

ctx.lineTo(250, 10);

ctx.lineTo(300, 50);

ctx.closePath();

ctx.fill();



// Second Grinch's speech bubble

ctx.beginPath();

ctx.moveTo(350, 50);

ctx.lineTo(400, 10);

ctx.lineTo(450, 50);

ctx.closePath();

ctx.fill();



// Third Grinch's speech bubble

ctx.beginPath();

ctx.moveTo(500, 50);

ctx.lineTo(550, 10);

ctx.lineTo(600, 50);

ctx.closePath();

ctx.fill();



// Fourth Grinch's speech bubble

ctx.beginPath();

ctx.moveTo(250, 250);

ctx.lineTo(300, 210);

ctx.lineTo(350, 250);

ctx.closePath();

ctx.fill();



// Fifth Grinch's speech bubble

ctx.beginPath();

ctx.moveTo(400, 250);

ctx.lineTo(450, 210);

ctx.lineTo(500, 250);

ctx.closePath();

ctx.fill();



// Adding some text

ctx.font = 'bold 24px Arial';

ctx.fillStyle = '#000000'; // Black



// First Grinch's text

ctx.fillText('Did you hear', 215, 40);

ctx.fillText('about Cindy Lou?', 205, 70);



// Second Grinch's text

ctx.fillText('I heard', 380, 40);

ctx.fillText('she caught me!', 365, 70);



// Third Grinch's text

ctx.fillText('The Who family', 55, 235);

ctx.fillText('is throwing a party!', 40, 265);



// Fourth Grinch's text

ctx.fillText('I just stole', 170, 435);

ctx.fillText('all the presents!', 155, 465);



// Fifth Grinch's text

ctx.fillText('I think I', 405, 435);

ctx.fillText('stole the show!', 395, 465);



// Adding some thought bubbles

ctx.fillStyle = '#ffffff'; // White

ctx.strokeStyle = '#000000'; // Black



// First Grinch's thought bubble

ctx.beginPath();

ctx.arc(130, 160, 40, 0, Math.PI * 2);

ctx.stroke();



// Second Grinch's thought bubble

ctx.beginPath();

ctx.arc(280, 160, 40, 0, Math.PI * 2);

ctx.stroke();



// Third Grinch's thought bubble

ctx.beginPath();

ctx.arc(430, 160, 40, 0, Math.PI * 2);

ctx.stroke();



// Fourth Grinch's thought bubble

ctx.beginPath();

ctx.arc(230, 360, 40, 0, Math.PI * 2);

ctx.stroke();



// Fifth Grinch's thought bubble

ctx.beginPath();

ctx.arc(380, 360, 40, 0, Math.PI * 2);

ctx.stroke();



// Adding some thought text

ctx.fillStyle = '#000000'; // Black



// First Grinch's thought text

ctx.fillText('I need a new plan', 100, 160);

ctx.fillText('to steal Christmas!', 90, 190);



// Second Grinch's thought text

ctx.fillText('I hope nobody finds', 250, 160);

ctx.fillText('out it was me!', 275, 190);



// Third Grinch's thought text

ctx.fillText('I wonder if they', 400, 160);

ctx.fillText('have any roast beast!', 370, 190);



// Fourth Grinch's thought text

ctx.fillText('I love the sound', 200, 360);

ctx.fillText('of crying children!', 190, 390);



// Fifth Grinch's thought text

ctx.fillText('I can\'t wait to', 350, 360);

ctx.fillText('ruin their Christmas!', 335, 390);



// Return the canvas