javascript - not a constructor error when object has previously been constructed -

i'm playing around canvas animation, , keep getting "line not constructor" error on line 120 in animate function when have constructed line object. appreciate fresh pair of eyes on this!

basically, once existing line hits platform should create new line object head off in nother direction, instead keeps throwing error.

code:

window.onload = function () {      "use strict";      var canvas = document.createelement("canvas");        canvas.width = window.innerwidth - 20;      canvas.height = window.innerheight - 20;      canvas.style.backgroundcolor = '#000';        document.body.appendchild(canvas);      canvas = document.getelementsbytagname("canvas")[0];        var ctx = canvas.getcontext('2d'),            grad = ctx.createlineargradient(0, 0, 0, canvas.height);        grad.addcolorstop(0, "#000");      grad.addcolorstop(0.25, "#101010");      grad.addcolorstop(0.5, "#101010");      grad.addcolorstop(0.75, "#101099");      grad.addcolorstop(1, "#0000ff");        var padding = 100,          i,          y,          platforms = [],          platpos,          ypossies = [],          numplatforms = 20,          linerate = 1,          lines = [],          index,          linedir = 1,          newline = false;        array.prototype.contains = function (obj) {              (i = this.length - 1; >= 0; -= 1) {                if (this[i] !== obj) {                  return true;              }          }          return false;      };        var platform = function () {              this.width = math.random() * 250;              this.height = 3;              this.posx = ((math.random() * (canvas.width - padding)) - this.width) + padding;              this.posy = ((math.random() * (canvas.height - padding)) - this.height);                  if (ypossies.contains(this.posy)) {                  this.posy += (math.random() * 55);              }              platpos = this.posy;              ypossies.push(platpos);                  this.draw = function () {                  ctx.beginpath();                  ctx.linewidth = this.height;                  ctx.strokestyle = "#929292";                  ctx.moveto(this.posx, this.posy);                  ctx.lineto(this.posx + this.width, this.posy);                  ctx.stroke();              };          },            line = function () {              ctx.strokestyle = "yellow";              ctx.linewidth = 2;              this.posx = canvas.width / 2;              //uncomment below randomise starting position of line              //            this.posx = ((math.random() * (canvas.width - 200)) + 200);              this.posy = 1;              this.newposy = this.posy;              this.linerate = linedir;              linedir = -linedir;                this.draw = function () {                  ctx.beginpath();                  ctx.moveto(this.posx, this.posy);                  this.posy += this.linerate;                  ctx.lineto(this.posx, this.posy);                  ctx.stroke();              };                this.update = function () {                  this.posy += this.linerate;                  (platform of platforms) {                      if (this.posy >= platform.posy && this.posy - platform.posy <= 3) {                          if (this.posx >= platform.posx && this.posx <= platform.posx + platform.width) {                              this.posy = platform.posy - 2;                              this.posx += this.linerate;                              newline = true;                          }                      }                  }                  this.draw();              };          },            setupplatforms = function () {              (i = 0; < numplatforms; += 1) {                  platforms[i] = new platform();              }              (i = 0; < numplatforms; += 1) {                  platforms[i].draw();              }                lines[0] = new line();              animate();            },            animate = function () {              if (newline) {                  lines[lines.length] = new line();              }              (line of lines) {                  line.update();              }              requestanimationframe(animate);          };        setupplatforms();    };

<!doctype html>  <html lang="en">    <head>      <meta charset="utf-8">      <title>push</title>      <script src='push.js'></script>  </head>    <body>    </body>    </html>

you overwritting line function here

animate = function () {     if (newline) {         lines[lines.length] = new line(); // <- once foreach loop ran, line class have become last line in lines array     }     (line of lines) { // <- line reassign line class         line.update();     }     requestanimationframe(animate); }; 

in for...of statement, reassign line element of array lines.

the easiest fix, change for...of loop following

for (let line of lines) {     line.update(); } 

a more secure way in ensuring doesn't happen define functions const, cannot reassigned in following edited snippet. @ once shows have error platform class, didn't show in running code, can fixed below here

for (let platform of platforms) {   if (this.posy >= platform.posy && this.posy - platform.posy <= 3) {     if (this.posx >= platform.posx && this.posx <= platform.posx + platform.width) {       this.posy = platform.posy - 2;       this.posx += this.linerate;       newline = true;     }   } } 

with changes, code seems working, , continue after hitting platform.

window.onload = function() {    "use strict";    var canvas = document.createelement("canvas");      canvas.width = window.innerwidth - 20;    canvas.height = window.innerheight - 20;    canvas.style.backgroundcolor = '#000';      document.body.appendchild(canvas);    canvas = document.getelementsbytagname("canvas")[0];      var ctx = canvas.getcontext('2d'),        grad = ctx.createlineargradient(0, 0, 0, canvas.height);      grad.addcolorstop(0, "#000");    grad.addcolorstop(0.25, "#101010");    grad.addcolorstop(0.5, "#101010");    grad.addcolorstop(0.75, "#101099");    grad.addcolorstop(1, "#0000ff");      var padding = 100,      i,      y,      platforms = [],      platpos,      ypossies = [],      numplatforms = 20,      linerate = 1,      lines = [],      index,      linedir = 1,      newline = false;      array.prototype.contains = function(obj) {          (i = this.length - 1; >= 0; -= 1) {          if (this[i] !== obj) {          return true;        }      }      return false;    };      const platform = function() {        this.width = math.random() * 250;        this.height = 3;        this.posx = ((math.random() * (canvas.width - padding)) - this.width) + padding;        this.posy = ((math.random() * (canvas.height - padding)) - this.height);            if (ypossies.contains(this.posy)) {          this.posy += (math.random() * 55);        }        platpos = this.posy;        ypossies.push(platpos);            this.draw = function() {          ctx.beginpath();          ctx.linewidth = this.height;          ctx.strokestyle = "#929292";          ctx.moveto(this.posx, this.posy);          ctx.lineto(this.posx + this.width, this.posy);          ctx.stroke();        };      },        line = function() {        ctx.strokestyle = "yellow";        ctx.linewidth = 2;        this.posx = canvas.width / 2;        //uncomment below randomise starting position of line        //            this.posx = ((math.random() * (canvas.width - 200)) + 200);        this.posy = 1;        this.newposy = this.posy;        this.linerate = linedir;        linedir = -linedir;          this.draw = function() {          ctx.beginpath();          ctx.moveto(this.posx, this.posy);          this.posy += this.linerate;          ctx.lineto(this.posx, this.posy);          ctx.stroke();        };          this.update = function() {          this.posy += this.linerate;          (let platform of platforms) {            if (this.posy >= platform.posy && this.posy - platform.posy <= 3) {              if (this.posx >= platform.posx && this.posx <= platform.posx + platform.width) {                this.posy = platform.posy - 2;                this.posx += this.linerate;                newline = true;              }            }          }          this.draw();        };      },        setupplatforms = function() {        (i = 0; < numplatforms; += 1) {          platforms[i] = new platform();        }        (i = 0; < numplatforms; += 1) {          platforms[i].draw();        }          lines[0] = new line();        animate();        },        animate = function() {        if (newline) {          lines[lines.length] = new line();        }        (let line of lines) {          line.update();        }        requestanimationframe(animate);      };      setupplatforms();    };