i am trying to make a circle player that follows the mouse and eats circles that are stored in the array food

Question

i am trying to make a circle player that follows the mouse and eats circles that are stored in the array food. i dont know why the circle is not moving. i am trying every thing. can somebody help me.

i tried making cahnges to the moveTowardsMouse but its not working maybe my logic is bad i am not using and libraries

let cnv = document.getElementById("myCanvas");
let ctx = cnv.getContext("2d");
cnv.width = 800;
cnv.height = 600;
let mouse = { x: 0, y: 0 };
let food = [];

let player = {
  x: cnv.width / 2,
  y: cnv.height / 2,
  r: 30,
  color: "purple",
  speed: 5,
};

function createRandomCircle() {
  circle = {
    x: Math.random() * cnv.width,
    y: Math.random() * cnv.height,
    r: Math.random() * 5 + 8,
    color: randomRGB(),
  };
  food.push(circle);
}

function draw() {
  ctx.clearRect(0, 0, cnv.width, cnv.height);

  // Draw circle
  for (let i = 0; i < food.length; i++) {
    const circles = food[i];
    ctx.fillStyle = circles.color;
    ctx.beginPath();
    ctx.arc(circles.x, circles.y, circles.r, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();
  }

  // draw player
  ctx.fillStyle = player.color;
  ctx.beginPath();
  ctx.arc(player.x, player.y, player.r, 0, Math.PI * 2);
  ctx.fill();
  ctx.closePath();
  mousemoveHandler();
  moveTowardsMouse(mouse.x, mouse.y);
  collision();
}

function moveTowardsMouse(px, py) {
  let dx = px - player.x;
  let dy = py - player.y;
  let distance = Math.sqrt(dx ** 2 + dy ** 2);
  player.x += (dx / distance) * player.speed;
  player.y += (dy / distance) * player.speed;
}

function collision() {
  for (let i = 0; i < food.length; i++) {
    const circles = food[i];
    if (
      player.x - player.r < circles.x + circles.r &&
      player.x + player.r > circles.x - circles.r &&
      player.y - player.r < circles.y + circles.r &&
      player.y + player.r > circles.y - circles.r
    ) {
      food.splice(i, 1);
      player.r += circles.r * 0.125;
      createRandomCircle();
    }
  }
}

document.addEventListener("mousemove", mousemoveHandler);

function mousemoveHandler(e) {
  // Get rectangle info about canvas location
  let cnvRect = cnv.getBoundingClientRect();

  // Calc mouse coordinates using mouse event and canvas location info
  mouse.x = Math.round(e.clientX - cnvRect.left);
  mouse.y = Math.round(e.clientY - cnvRect.top);
}
// Generate random circles and rectangles
for (let i = 0; i < 10; i++) {
  createRandomCircle();
}

// Random Library

// return a decimal b/t low(inclusive) and high (exclusive)
function randomDec(low, high) {
  return Math.random() * (high - low) + low;
}

// return a random integer b/t low(inclusive) and high (exclusive)

function randomInt(low, high) {
  return Math.floor(randomDec(low, high));
}

// return random rgb color - 'rgb(__, __, __)'
function randomRGB() {
  return `rgb(${randomInt(0, 256)},${randomInt(0, 256)},${randomInt(0, 256)})`;
}
// Main game loop
function gameLoop() {
  draw();
  setInterval(createRandomCircle, 3000);
  requestAnimationFrame(draw);
}
gameLoop();