ChatGPT owl

HTML

<!DOCTYPE HTML>

<html>
   <head>
   </head>   
   <body>
      <canvas id = "canvas" width = "100" height = "100"></canvas>
   </body>
</html>

JavaScript

// Set up the canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// Define the size and position of the owl
var width = 100;
var height = 100;
var x = 50;
var y = 50;

// Define the size and position of the owl's eyes
var eyeWidth = width / 8;
var eyeHeight = height / 8;
var eyeX = x - width / 4;
var eyeY = y - height / 4;

// Define the direction of the owl's gaze
var direction = 1;

// Animate the owl's eyes
function animate() {
  // Clear the canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Draw the owl's body
  ctx.beginPath();
  ctx.arc(x, y, width / 2, 0, 2 * Math.PI);
  ctx.fillStyle = "brown";
  ctx.fill();

  // Draw the owl's eyes
  ctx.beginPath();
  ctx.arc(eyeX, eyeY, eyeWidth, 0, 2 * Math.PI);
  ctx.arc(eyeX + width / 2, eyeY, eyeWidth, 0, 2 * Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();

  // Draw the owl's pupils
  ctx.beginPath();
  ctx.arc(eyeX, eyeY, eyeWidth / 2, 0, 2 * Math.PI);
  ctx.arc(eyeX + width / 2, eyeY, eyeWidth / 2, 0, 2 * Math.PI);
  ctx.fillStyle = "black";
  ctx.fill();

  // Draw the owl's beak
  ctx.beginPath();
  ctx.moveTo(x - width / 8, y);
  ctx.lineTo(x, y + height / 4);
  ctx.lineTo(x + width / 8, y);
  ctx.fillStyle = "orange";
  ctx.fill();

  // Update the direction of the owl's gaze
  if (eyeX + eyeWidth >= x + width / 2 || eyeX - eyeWidth <= x - width / 2) {
    direction *= -1;
  }

  // Move the owl's eyes in the current direction
  eyeX += direction;

  // Animate the next frame
// Schedule the next animation frame
	requestAnimationFrame(animate);
}

// Start the animation
animate();