JavaScript canvas throws an Error, but works anyway

Question

I am making this background for a page drawing random lines. The lines are being drawn and it looks as it was supposed to but when I look into the console I get about ~10 errors every second. It says it cannot read startX and starY. When I change it to x and why it does not draw the lines anymore.

var sandbox = document.getElementById('sandbox');
ctx = sandbox.getContext('2d');
var referencePoint = function(x, y) {
  this.startX = x;
  this.startY = y;
};

const progressPoints = [];
for (let i = 0; i < 15; i++) {
  let x = Math.floor(Math.random() * sandbox.width);
  let y = Math.floor(Math.random() * sandbox.height);
  progressPoints.push(new referencePoint(x, y));
};


ctx.strokeStyle= "grey";
ctx.moveTo(progressPoints[0].x, progressPoints[0].y);

It supposedly cannot read those startX and startY:

var counter = 1,
    interval = setInterval(function() {
      var point = progressPoints[counter];
      ctx.lineTo(point.startX, point.startY);
      //alert(point.startX, point.startY)
      ctx.stroke();
      if(counter >= progressPoints.lenght){
        clearInterval(interval);
      };
      counter++
    }, 140);




(function() {
  var contentBox = $('div.content-box'),
      activeContent = contentBox.find('div.active-content'),
      pageTransitionOverlay = contentBox.find('div.page-transition-overlay'),
      navBtn = $('a.nav-btn'),
      hiddenContent = $('div.hidden-content');

  navBtn.on('click', function(e) {
    var self = $(this),
        moveToActive = hiddenContent.find('div.' + self.data('target-class'));

    contentBox.addClass('transitionEffect');
    pageTransitionOverlay.fadeIn(300, function() {
      // Change content
      self.closest('div.content-wrapper').appendTo(hiddenContent);
      moveToActive.appendTo(activeContent);

      // Transition transitionEffect
      contentBox.removeClass('transitionEffect');
      pageTransitionOverlay.fadeOut(300);
    });
    e.preventDefault();
  });
})();

Answer 1

So it seems that length is too much, try 1 less

if (counter >= progressPoints.length - 1) { ... }

var sandbox = document.getElementById('sandbox');
ctx = sandbox.getContext('2d');
var referencePoint = function(x, y) {
  this.startX = x;
  this.startY = y;
};

const progressPoints = [];
for (let i = 0; i < 15; i++) {
  let x = Math.floor(Math.random() * sandbox.width);
  let y = Math.floor(Math.random() * sandbox.height);
  progressPoints.push(new referencePoint(x, y));
};

ctx.strokeStyle = "grey";
ctx.moveTo(progressPoints[0].x, progressPoints[0].y);




var counter = 1,
  interval = setInterval(function() {
    var point = progressPoints[counter];
    ctx.lineTo(point.startX, point.startY);
    //alert(point.startX, point.startY)
    ctx.stroke();
    if (counter >= progressPoints.length - 1) {
      clearInterval(interval);
    };
    counter++
  }, 140);




(function() {
  var contentBox = $('div.content-box'),
    activeContent = contentBox.find('div.active-content'),
    pageTransitionOverlay = contentBox.find('div.page-transition-overlay'),
    navBtn = $('a.nav-btn'),
    hiddenContent = $('div.hidden-content');

  navBtn.on('click', function(e) {
    var self = $(this),
      moveToActive = hiddenContent.find('div.' + self.data('target-class'));

    contentBox.addClass('transitionEffect');
    pageTransitionOverlay.fadeIn(300, function() {
      // Change content
      self.closest('div.content-wrapper').appendTo(hiddenContent);
      moveToActive.appendTo(activeContent);

      // Transition transitionEffect
      contentBox.removeClass('transitionEffect');
      pageTransitionOverlay.fadeOut(300);
    });
    e.preventDefault();
  });
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<canvas id="sandbox"></canvas>