Why doesn't this neural network give (only) the full 3-layer path?

This function is a rendering of the neural network shown on the right side of this image based on a fairly simple data structure.

Attempt at evolution:

After evolution:

Each point represents a neuron, each line represents a connection. There's a problem with which neurons and connections arise and which ones do not, and I have been struggling with this problem for 5 hours straight, without coffee breaks. One of you will probably point out one tiny stupid mistake that caused the problem, and I will most likely keep pulling out my hair.

Simply put: connections are made from top to bottom. I only want to make full paths from top to bottom. No points (neurons) in the middle should be displayed if no connections lead to them from above. If a neuron in the upper layer connects to a neuron in the middle layer, but this neuron does not interact with the neural layer of the lower layer, that connection does nothing, so it should not be rendered.

As you can see, there are top-level neurons that are rendered with no connections at all, and mid-level neurons that are rendered without a vertex connection. All connections are from top to bottom, no connection flows upward. In other words, the network is forwarding.

The data structure passed to this function is brain

, which is the same brain

one passed to the following constructors Neuron

and Connection

, which are listed in abbreviated form, only displaying properties related to the function in question (edited from the original with further attempts to solve the problem:

Neuron

function Neuron(brain, layer) {
    var that = this;
    brain.counter++;
    brain.globalReferenceNeurons[brain.counter] = this;
    this.active = true; //as the brain mutates, some neurons and 
    //connections are disabled via this property
    this.layer = layer;
    this.id = brain.counter;
    this.connected = {};
    this.connections = {};
    this.connect = function(target) {
        if (that.active == true) {
            new Connection(brain, this, target, function(id, connection) {
                brain.globalReferenceConnections[id] = connection;
                that.connections[id] = connection;
            });
        }
    };
}

      

        
        
        
      

    

Compound

function Connection(brain, source, target, callback) {
    if (source.layer < target.layer) {
        brain.counter++;
        brain.globalReferenceConnections[brain.counter] = this;
        this.active = true; //as the brain mutates, some neurons and 
        //connections are disabled via this property
        this.id = brain.counter;
        this.source = source;
        this.target = target;
        target.connected[this.id] = this; //connected references 
        //incoming connections to a neuron
        callback(this.id, this);
    }
}

      

        
        
        
      

    

As you can see, it brain.globalReferenceNeurons

contains the data needed to render the neural network in the picture.

And here's the render function in question (updated again):

function renderBrain(brain, context, canvas) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  var width = canvas.width;
  var height = canvas.height;
  var layers = brain.layers;
  var heightDivision = height / layers;
  var layerList = [];
  for (var i1 = 0; i1 < brain.layers; i1++) {
    layerList.push([]);
    for (var prop1 in brain.globalReferenceNeurons) {
      if (brain.globalReferenceNeurons[prop1].layer === i1) {
        layerList[i1].push(brain.globalReferenceNeurons[prop1]);
      }
    }
  }

  function renderLayer(layer, layerCount, layerTotal) {
    var length = layer.length;
    var widthDivision = width / length;
    var neuronCount = 0;
    for (var i1 = 0; i1 < layer.length; i1++) {
      neuronCount++;
      const getActiveProps = obj => Object.keys(obj).filter(k => obj[k].active)

      function hasActivePathAhead(obj, count) {
        if (!count) {
          count = 0;
        }
        if (obj.active) {
          var targets = getActiveProps(obj.connections);
          if (obj.layer === 2) {
            return true;
          } else if (obj.connections[targets[count]]) {
            for (var i1 = 0; i1 < targets.length; i1++) {
              var result = hasActivePathAhead(obj.connections[targets[count]].target, 
                  count + 1);
              return result;
            }
            return false;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }

      function hasActivePathBehind(obj, count) {
        if (!count) {
          count = 0;
        }
        if (obj.active) {
          var sources = getActiveProps(obj.connected);
          if (obj.layer === 0) {
            return true;
          } else if (obj.connected[sources[count]]) {
            for (var i1 = 0; i1 < sources.length; i1++) {
              var result = 
                  hasActivePathBehind(obj.connected[sources[count]].source, count + 1);
              return result;
            }
            return false;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
      if (hasActivePathAhead(layer[i1]) && hasActivePathBehind(layer[i1])) {
        context.beginPath();
        context.arc((widthDivision * neuronCount) 
            - (0.5 * widthDivision), 
            (heightDivision * layerCount) 
            - (heightDivision * 0.5), 
            5, 0, 2 * Math.PI, false);
        context.fillStyle = '#adf442';
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = '#56cc41';
        context.stroke();
        var connectionCount = 0;
        for (var i2 = 0; i2 < Object.keys(layer[i1].connections).length; i2++) {
          var connection = 
              layer[i1].connections[Object.keys(layer[i1].connections)[i2]];
          if (hasActivePathAhead(connection.target) 
              && hasActivePathBehind(connection.target)) {
            var targetLayer = connection.target.layer;
            var index = layerList[targetLayer].findIndex(function(e) {
              return e == connection.target
            });
            if (index > -1) {
              var targetLayerLength = Object.keys(layerList[targetLayer]).length;
              var targetLayerWidthDivision = width / targetLayerLength;
              var p1 = {
                x: (widthDivision * neuronCount) - (0.5 * widthDivision),
                y: (heightDivision * layerCount) - (heightDivision * 0.5)
              };
              var p2 = {
                x: (index * targetLayerWidthDivision) 
                    + (0.5 * targetLayerWidthDivision),
                y: (targetLayer * heightDivision) 
                    + (heightDivision * 0.5)
              };
              connectionCount++;
              context.beginPath();
              context.moveTo(p1.x, p1.y);
              context.lineTo(p2.x, p2.y);
              context.lineWidth = 1;
              context.stroke();
            }
          }
        }
      }
    }
  }
  var layerCount = 0;
  for (i1 = 0; i1 < layerList.length; i1++) {
    layerCount++;
    renderLayer(layerList[i1], layerCount, layerList.length);
  }
}

      

        
        
        
      

    

"Working" example test: https://jsfiddle.net/au2Lt6na/4/

For 5 hours I fiddled with this function trying to figure out the problem and for the life of me I was unable to figure it out. Can anyone tell me what is causing the rendering of non-external neural pathways?

Note. I've spent many hours over the past few days trying to fix this, writing brand new ways to figure out which paths are completed from top to bottom, and it still suffers from the same problems as before. I am missing something.