title: Is garbage collection affecting the framerate of this canvas snake game?
body: <p><a href="https://jsfiddle.net/qf3upqrs/" rel="nofollow noreferrer"><strong>JSFiddle demo (~200 lines. WASD to move, snake speed is set to very slow)</strong></a></p>
  
  <p>Whenever I let my code run for a while, I can observe the framerate steadily declining.</p>
  
  <p>I believe the code that is rendering the snake contributes to the fps loss: it clears the entire canvas using <code>ctx.clearRect</code>. It then takes a one-dimensional array representing x and y cordinates of turns that the snake takes and creates a path. I then call <code>ctx.stroke</code>. It would be better to only draw the new part of the snake, as opposed to clearing the canvas and remaking the path of the entire snake and redrawing that snake on each frame, right?</p>
  
  <pre><code>Snake.prototype.render = function() {
  
  // this.env.canvas.fgContext is the context for the foreground canvas.
  // There is a background canvas for a chess background pattern.
  this.env.canvas.fgContext.strokeStyle = this.color;
  this.env.canvas.fgContext.lineWidth   = this.env.tileSize;
  this.env.canvas.fgContext.lineCap = "square";
  this.env.canvas.fgContext.beginPath();
  this.env.canvas.fgContext.moveTo(this.env.leftWidthGap + (this.positions[0]-0.5)*this.env.tileSize,
                                   this.env.topHeightGap + (this.positions[1]-0.5)*this.env.tileSize);
  
  for(var i = 2; i &lt; this.positions.length; i += 2)
     this.env.canvas.fgContext.lineTo(this.env.leftWidthGap + (this.positions[i]-0.5)*this.env.tileSize,
                                   this.env.topHeightGap + (this.positions[i+1]-0.5)*this.env.tileSize);
  this.env.canvas.fgContext.stroke();
  }
  </code></pre>
  
  <p>Also, the code that moves the "head" and "tail" of the snake seem to be negatively impacting the framerate, as removing it (as well as removing the rendering code) results in no framerate loss:</p>
  
  <pre><code>Snake.prototype.moveHead = function(delta) {
  this.idx    = this.positions.length - (this.input.isCurrentY ? 1 : 2),
  this.newPos = this.positions[this.idx] + this.speed * delta * this.input.currentDir;
  
  if(this.input.currentKeyCode === this.input.futureKeyCode || Math.trunc(this.positions[this.idx]) === Math.trunc(this.newPos)) { this.positions[this.idx] = this.newPos; return; }
  this.positions[this.idx] = Math.round(this.positions[this.idx]);
  this.deltaChange = Math.abs(this.newPos - this.positions[this.idx]);
  this.input.assignFutureToCurrent();
  this.inputStack.push(this.input.currentDir)
  this.inputStack.push(this.input.isCurrentY);
  this.positions.push(this.positions[this.positions.length-2]);
  this.positions.push(this.positions[this.positions.length-2]);
  this.positions[this.positions.length - (this.input.isCurrentY ? 1 : 2)] += this.deltaChange * this.input.currentDir;
  }
  Snake.prototype.moveTail = function(delta) {
  this.idx = this.inputStack[1] ? 1 : 0;
  this.positions[this.idx] += this.speed * delta * this.inputStack[0];
  
  if((this.inputStack[0] &lt; 0 &amp;&amp; this.positions[this.idx] &lt; this.positions[this.idx+2]) ||
      this.inputStack[0] &gt; 0 &amp;&amp; this.positions[this.idx] &gt; this.positions[this.idx+2]) {
      this.deltaChange = Math.abs(this.positions[this.idx] - this.positions[this.idx+2]);
      this.positions = this.positions.slice(2),
      this.inputStack = this.inputStack.slice(2);
      this.positions[this.inputStack[1] ? 1 : 0] += this.deltaChange * this.inputStack[0];
  }
  }
  </code></pre>
  
  <p>These functions are called on every frame in a game loop that I can elaborate on if necessary. Is the problem all the pushing and slicing of arrays? Is memory leaking here?</p>