let canvas;
function initiate() {
  let element = document.getElementById("canvas");
  canvas = element.getContext("2d");
  window.addEventListener("mousemove", animation);
}
function animation(event) {
  canvas.clearRect(0, 0, 500, 300);

  let xmouse = event.clientX;
  let ymouse = event.clientY;
  let xcenter = 220;
  let ycenter = 150;
  let ang = Math.atan2(xmouse - xcenter, ymouse - ycenter);
  let x = xcenter + Math.round(Math.sin(ang) * 10);
  let y = ycenter + Math.round(Math.cos(ang) * 10);

  canvas.beginPath();
  canvas.arc(xcenter, ycenter, 20, 0, Math.PI * 2, false);
  canvas.moveTo(xcenter + 70, 150);
  canvas.arc(xcenter + 50, 150, 20, 0, Math.PI * 2, false);
  canvas.stroke();

  canvas.beginPath();
  canvas.moveTo(x + 10, y);
  canvas.arc(x, y, 10, 0, Math.PI * 2, false);
  canvas.moveTo(x + 60, y);
  canvas.arc(x + 50, y, 10, 0, Math.PI * 2, false);
  canvas.fill();
}
window.addEventListener("DOMContentLoaded", initiate);