let canvas = document.getElementById('canvas'),
  context = canvas.getContext('2d'),
  width = canvas.width = window.innerWidth,
  height = canvas.height = window.innerHeight;


// Point A
let startX = 50, startY = 50;
// Point B
let endX = 420, endY = 200;

// Current position of the ball
let x = startX, y = startY;

update();
function update() {
  context.clearRect(0, 0, width, height);
  drawBall(x, y, 30);
  x = lerp(x, endX, 0.1);
  y = lerp(y, endY, 0.1);
  requestAnimationFrame(update);
}


function drawBall(x, y, radius) {
  context.beginPath(); 
  context.fillStyle = '#66DA79';
  context.arc(x, y, radius, 0, 2 * Math.PI, false);
  context.fill();
}

function lerp(min, max, fraction) {
  return (max - min) * fraction + min;
}

window.addEventListener('click', e => {
  endX = e.pageX;
  endY = e.pageY;
});