Canvas animation in JavaScript?

Question

JavaScript

Hello everybody! In JavaScript, you need to draw a bee through the canvas, which will randomly move around the page.
The code:

var circle = function (x, y, radius, fillCircle) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, MathPI * 2, false);
  if (fillCircle) {
    ctx.fill();
  } else {
    ctx.stroke();
  }
}; 

var drawBee = function(x,y) {
  ctx.lineWidth = 2;
  ctx.strokeStyle = "Black";
  ctx.fillStyle = "Gold";
  circle(x, y, 8, true);
  circle(x, y, 8, false);
  circle(x - 5, y - 11, 5, false);
  circle(x + 5, y - 11, 5, false);
  circle(x - 2, y - 1, 2, false);
  circle(x + 2, y -1, 2, false);
};
 var update = function (coordinate) {
   var offset = Math.random() * 4 -2;
   coordinate += offset;
   if (coordinate > 200) {
     coordinate = 200;
   }
   if (coordinate < 0) {
     coordinate = 0;
   }
   return coordinate;
 };

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var x = 100;
var y = 100;
setInterval (function () {
  ctx.clearRect(0, 0, 200, 200);
  drawBee(x, y);
  x = update(x);
  y = update(y);
  ctx.strokeRect(0, 0, 200, 200);
}, 300);

Here is the code I wrote, but for some reason nothing is shown when I run it in the browser. Errors are constantly added to the console (and so on up to 2 thousand!)

Help me figure out what my error is. Or write your own code.
I will be glad to every answer!

Answer 1

There is no such thing as MathPI, but there isMath.PI

Answer 2

What algorithm is suitable for describing the flight of an insect?