let stats = new Stats();

let canvas = null;
let context = null;

let dot = { x: 0, y: 0, size: 2, };
let circle = { x: 0, y: 0, radius: 50, };

window.onload = function() {
  canvas = document.getElementById('canvas');
  context = canvas.getContext('2d');

  // add statistics
  stats.showPanel(0);
  document.body.appendChild(stats.dom);

  document.getElementById('canvas').addEventListener('mousemove', (event) => {
    let canvas_rect = canvas.getBoundingClientRect();
    dot.x = event.clientX - canvas_rect.left;
    dot.y = event.clientY - canvas_rect.top;
  });

  initScene();

  requestAnimationFrame(mainLoop);
}

function drawScene() {
  'use strict';

  clearContext();

  // Calculate dot collision and change circle color
  if (Math.sqrt((dot.x - circle.x) * (dot.x - circle.x) + (dot.y - circle.y) * (dot.y - circle.y)) <= circle.radius) {
    context.fillStyle = '#d44e52';
  }
  else {
    context.fillStyle = '#38607c';
  }

  // Draw circle
  context.beginPath();
  context.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
  context.fill();

  // Draw dot
  context.fillStyle = '#ffcc68';
  context.fillRect(dot.x, dot.y, dot.size, dot.size);
}

function initScene() {
  circle.x = canvas.width / 2;
  circle.y = canvas.height / 2;
}

function mainLoop() {
  stats.begin();
  drawScene();
  stats.end();

  requestAnimationFrame(mainLoop);
}

function clearContext() {
  'use strict';

  context.fillStyle = '#2a2a3a';
  context.fillRect(0, 0, canvas.width, canvas.height);
}