<canvas width="1800" height="800"></canvas>

canvas {
  margin: 0 auto;
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  background-color: #eee;
}

(function () {

  'use strict';

  var canvas = document.querySelector('canvas'),
    context = canvas.getContext('2d'),
    circle = { _x: 100, _y: 100, _radius: 50, _scale: 100 };

  function play_animation () {

    $(circle).animate({ _x: canvas.width / 2, _scale: 50 }, 600, 'easeOutElastic')
        .animate({ _x: canvas.width - 100, _scale: 150 }, 600, 'easeOutElastic')
        .animate({ _y: canvas.height - 100, _scale: 100 }, 600, 'easeOutElastic')
        .animate({ _x: canvas.width / 2, _scale: 50 }, 600, 'easeOutElastic')
        .animate({ _x: 100, _scale: 150 }, 600, 'easeOutElastic')
        .animate({ _y: 100, _scale: 100 }, 600, 'easeOutElastic', play_animation);

  }

  play_animation();

  function draw () {

    context.clearRect(0, 0, canvas.width, canvas.height);

    context.save();

    context.strokeStyle = 'red';

    context.lineWidth = 10;

    context.lineCap = 'round';

    context.beginPath();

    context.moveTo(canvas.width / 2, canvas.height / 2);

    context.lineTo(circle._x, circle._y);

    context.stroke();

    context.closePath();

    context.restore();

    context.save();

    context.beginPath();

    context.arc(circle._x, circle._y, circle._radius * circle._scale / 100, 0, Math.PI * 180);

    context.fill();

    context.closePath();

    context.restore();

    requestAnimationFrame(draw);

  }

  requestAnimationFrame(draw);

}());