<script>
window.addEventListener("load", function () {
  var canvasElement = document.createElement("canvas");

  canvasElement.width = 500;
  canvasElement.height = 500;

  canvasElement.style.display = "block";
  canvasElement.style.margin = "auto";

  document.body.appendChild(canvasElement);

  var canvasContext = canvasElement.getContext("2d");

  var circle = {x: 0, y: 0, vX: 0, vY: 0, radius: 32};
  var lines = [{x: 240, y: 100, x2: 350, y2: 350},
                {x: 260, y: 100, x2: 150, y2: 350}];
  var mouse = {x: 0, y: 0};

  window.requestAnimationFrame(loop);

  document.addEventListener("mousemove", function () {
		var canvasBound = canvasElement.getBoundingClientRect();

		mouse.x = event.clientX - canvasBound.left;
    mouse.y = event.clientY - canvasBound.top;
  });

  var keys = [];

  document.addEventListener("keydown", function () {
    keys[event.keyCode] = true;
  });

  document.addEventListener("keyup", function () {
    keys[event.keyCode] = false;
  });

  for (var i = 0; i < lines.length; i++) {
    var dX = lines[i].x2 - lines[i].x, dY = lines[i].y2 - lines[i].y;
    var length = Math.sqrt(dX * dX + dY * dY);

    lines[i].vX = dX / length;
    lines[i].vY = dY / length;

    lines[i].nX = -dY / length;
    lines[i].nY = dX / length;
  }

  function loop() {
    if (keys[37]) {
      circle.vX -= 0.2;
    }

    if (keys[38]) {
      circle.vY -= 0.2;
    }

    if (keys[39]) {
      circle.vX += 0.2;
    }

    if (keys[40]) {
      circle.vY += 0.2;
    }

    circle.vX *= 0.96;
    circle.vY *= 0.96;

    circle.x += circle.vX;
    circle.y += circle.vY;

    for (var i = 0; i < lines.length; i++)
      collide(circle, lines[i]);

    canvasContext.clearRect(0, 0, 500, 500);

    canvasContext.strokeStyle = "blue";
    for (var i = 0; i < lines.length; i++) {
      canvasContext.strokeStyle = "blue";
      canvasContext.beginPath();
        canvasContext.moveTo(lines[i].x, lines[i].y);
        canvasContext.lineTo(lines[i].x2, lines[i].y2);
      canvasContext.closePath();
      canvasContext.stroke();

      canvasContext.strokeStyle = "green";
      canvasContext.beginPath();
        canvasContext.moveTo(lines[i].x, lines[i].y);
        canvasContext.lineTo(lines[i].x + lines[i].nX * 20, lines[i].y + lines[i].nY * 20);
      canvasContext.closePath();
      canvasContext.stroke();
    }

    canvasContext.fillStyle = "red";
    canvasContext.beginPath();
      canvasContext.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI, false);
    canvasContext.closePath();
    canvasContext.fill();

    window.requestAnimationFrame(loop);
  }

  function collide(circle, line) {
    var side = Math.sign((line.x2 - line.x) * (circle.y - line.y) - (line.y2 - line.y) * (circle.x - line.x));
    var dist = Math.abs((circle.x - line.x) * line.nX + (circle.y - line.y) * line.nY);
    var s1 = Math.sign((circle.x - line.x) * line.vX + (circle.y - line.y) * line.vY);
    var s2 = Math.sign((circle.x - line.x2) * line.vX + (circle.y - line.y2) * line.vY);

    if (dist < circle.radius) {
      if (s1 != s2) {
        circle.x += side * line.nX * (circle.radius - dist);
        circle.y += side * line.nY * (circle.radius - dist);
      }
    }

    if (s1 == s2) {
      var nDist, cX, cY;
      if (s1 === 1) {
        cX = line.x2 - circle.x;
        cY = line.y2 - circle.y;
        nDist = Math.sqrt(cX * cX + cY * cY);

        if (nDist < circle.radius) {
          circle.x += cX * (nDist - circle.radius) / nDist;
          circle.y += cY * (nDist - circle.radius) / nDist;
        }
      } else if (s2 === -1) {
        cX = line.x - circle.x;
        cY = line.y - circle.y;
        nDist = Math.sqrt(cX * cX + cY * cY);

        if (nDist < circle.radius) {
          circle.x += cX * (nDist - circle.radius) / nDist;
          circle.y += cY * (nDist - circle.radius) / nDist;
        }
      }
    }
  }
});
</script>