// Owl Component Lifecycle Infographic



// Creating a colorful background

ctx.fillStyle = '#F9F9F9'; // Setting the background color

ctx.fillRect(0, 0, 512, 512); // Drawing a rectangle to fill the canvas



// Drawing the title

ctx.fillStyle = '#333333'; // Setting the text color

ctx.font = 'bold 24px Arial'; // Setting the font style

ctx.fillText('Owl Component Lifecycle', 100, 50); // Drawing the title text



// Drawing the owl

ctx.strokeStyle = '#333333'; // Setting the stroke color

ctx.lineWidth = 2; // Setting the stroke width



// Drawing the body

ctx.beginPath();

ctx.arc(256, 200, 80, 0, Math.PI * 2); // Drawing a circle for the body

ctx.closePath();

ctx.stroke();



// Drawing the eyes

ctx.fillStyle = '#FFD700'; // Setting the eye color

ctx.beginPath();

ctx.arc(226, 180, 15, 0, Math.PI * 2); // Drawing a circle for the left eye

ctx.arc(286, 180, 15, 0, Math.PI * 2); // Drawing a circle for the right eye

ctx.closePath();

ctx.fill();



// Drawing the beak

ctx.fillStyle = '#FFA500'; // Setting the beak color

ctx.beginPath();

ctx.moveTo(246, 220); // Moving the pen to the starting point of the beak

ctx.lineTo(266, 220); // Drawing a line to the first point of the beak

ctx.lineTo(256, 230); // Drawing a line to the top point of the beak

ctx.closePath();

ctx.fill();



// Drawing the wings

ctx.fillStyle = '#333333'; // Setting the wing color

ctx.beginPath();

ctx.moveTo(176, 200); // Moving the pen to the starting point of the left wing

ctx.lineTo(256, 120); // Drawing a line to the top point of the left wing

ctx.lineTo(336, 200); // Drawing a line to the end point of the left wing

ctx.moveTo(176, 200); // Moving the pen to the starting point of the right wing

ctx.lineTo(256, 280); // Drawing a line to the bottom point of the right wing

ctx.lineTo(336, 200); // Drawing a line to the end point of the right wing

ctx.closePath();

ctx.fill();



// Drawing the feet

ctx.fillStyle = '#333333'; // Setting the feet color

ctx.beginPath();

ctx.moveTo(216, 280); // Moving the pen to the starting point of the left foot

ctx.lineTo(236, 300); // Drawing a line to the first point of the left foot

ctx.lineTo(196, 300); // Drawing a line to the second point of the left foot

ctx.moveTo(296, 280); // Moving the pen to the starting point of the right foot

ctx.lineTo(276, 300); // Drawing a line to the first point of the right foot

ctx.lineTo(316, 300); // Drawing a line to the second point of the right foot

ctx.closePath();

ctx.fill();



// Adding lifecycle labels

ctx.fillStyle = '#333333'; // Setting the text color

ctx.font = 'bold 16px Arial'; // Setting the font style

ctx.fillText('Mounting', 40, 400); // Drawing the "Mounting" text

ctx.fillText('Updating', 210, 400); // Drawing the "Updating" text

ctx.fillText('Unmounting', 390, 400); // Drawing the "Unmounting" text



// Adding lifecycle arrows

ctx.fillStyle = '#333333'; // Setting the arrow color

ctx.beginPath();

ctx.moveTo(140, 370); // Moving the pen to the starting point of the mounting arrow

ctx.lineTo(60, 380); // Drawing a line to the first point of the mounting arrow

ctx.lineTo(60, 420); // Drawing a line to the second point of the mounting arrow

ctx.lineTo(140, 430); // Drawing a line to the end point of the mounting arrow

ctx.moveTo(300, 370); // Moving the pen to the starting point of the updating arrow

ctx.lineTo(220, 380); // Drawing a line to the first point of the updating arrow

ctx.lineTo(220, 420); // Drawing a line to the second point of the updating arrow

ctx.lineTo(300, 430); // Drawing a line to the end point of the updating arrow

ctx.moveTo(460, 370); // Moving the pen to the starting point of the unmounting arrow

ctx.lineTo(380, 380); // Drawing a line to the first point of the unmounting arrow

ctx.lineTo(380, 420); // Drawing a line to the second point of the unmounting arrow

ctx.lineTo(460, 430); // Drawing a line to the end point of the unmounting arrow

ctx.closePath();

ctx.fill();



// Adding lifecycle arrowheads

ctx.fillStyle = '#333333'; // Setting the arrowhead color

ctx.beginPath();

ctx.moveTo(140, 430); // Moving the pen to the starting point of the mounting arrowhead

ctx.lineTo(130, 420); // Drawing a line to the first point of the mounting arrowhead

ctx.lineTo(150, 420); // Drawing a line to the second point of the mounting arrowhead

ctx.closePath();

ctx.fill();

ctx.beginPath();

ctx.moveTo(300, 430); // Moving the pen to the starting point of the updating arrowhead

ctx.lineTo(290, 420); // Drawing a line to the first point of the updating arrowhead

ctx.lineTo(310, 420); // Drawing a line to the second point of the updating arrowhead

ctx.closePath();

ctx.fill();

ctx.beginPath();

ctx.moveTo(460, 430); // Moving the pen to the starting point of the unmounting arrowhead

ctx.lineTo(450, 420); // Drawing a line to the first point of the unmounting arrowhead

ctx.lineTo(470, 420); // Drawing a line to the second point of the unmounting arrowhead

ctx.closePath();

ctx.fill();



// Adding fun fact

// Did you know that owls are also known as the "night's artists"? They create beautiful masterpieces with their feathers!