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

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

  document.body.appendChild(canvasElement);

  var mouseX = 0, mouseY = 0;
  var self = {x: 150, y: 275}, other = {x: 250, y: 175}, target = {x: 0, y: 0};

  window.requestAnimationFrame(renderFrame);

  document.addEventListener("mousemove", handleMouse);
  document.addEventListener("mousedown", function () { other.x = mouseX; other.y = mouseY });

  function renderFrame() {
    target.x = mouseX; target.y = mouseY;

    context.clearRect(0, 0, 500, 350);

    context.beginPath();
    context.arc(self.x, self.y, 25, 0, 2 * Math.PI, false);
    context.fillStyle = 'red';
    context.fill();
    context.closePath();

    context.beginPath();
    context.arc(target.x, target.y, 25, 0, 2 * Math.PI, false);
    context.fillStyle = 'rgba(255, 0, 0, 0.2)';
    context.fill();
    context.closePath();

    var dts = distToSegment(other, self, target);

    context.beginPath();
    context.arc(other.x, other.y, 25, 0, 2 * Math.PI, false);
    context.fillStyle = dts < 50 ? 'green' : 'blue';
    context.fill();
    context.closePath();

    var length = Math.hypot(target.x - self.x, target.y - self.y), normalX = -(target.y - self.y) / length, normalY = (target.x - self.x) / length;

    context.beginPath();
    context.moveTo(self.x, self.y);
    context.lineTo(target.x, target.y);
    context.strokeStyle = 'black';
    context.stroke();
    context.closePath();

    context.beginPath();
    context.moveTo(self.x - normalX * 25, self.y - normalY * 25);
    context.lineTo(target.x - normalX * 25, target.y - normalY * 25);
    context.strokeStyle = 'gray';
    context.stroke();
    context.closePath();

    context.beginPath();
    context.moveTo(self.x + normalX * 25, self.y + normalY * 25);
    context.lineTo(target.x + normalX * 25, target.y + normalY * 25);
    context.strokeStyle = 'gray';
    context.stroke();
    context.closePath();

    window.requestAnimationFrame(renderFrame);
  }

  function sqr(x) { return x * x }

  function dist2(v, w) { return sqr(v.x - w.x) + sqr(v.y - w.y) }

  function distToSegmentSquared(p, v, w) {
    var l2 = dist2(v, w);
    if (l2 == 0) return dist2(p, v);
    var t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;
    if (t < 0) return dist2(p, v);
    if (t > 1) return dist2(p, w);
    return dist2(p, { x: v.x + t * (w.x - v.x),
                      y: v.y + t * (w.y - v.y) });
  }

  function distToSegment(p, v, w) { return Math.sqrt(distToSegmentSquared(p, v, w)); }


  function handleMouse(event) {
    var mouseCoordinates = getMousePosition(canvasElement, event);

    mouseX = mouseCoordinates.x;
    mouseY = mouseCoordinates.y;
  }

  function getMousePosition(canvasElement, event) {
    var canvasBound = canvasElement.getBoundingClientRect();

    return {x: event.clientX - canvasBound.left, y: event.clientY - canvasBound.top};
  }
});
</script>