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();
});
})();
CodePudding user response:
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>