RangeError with requestAnimationFrame

Question

I'm getting the following error:

RangeError: Maximum call stack size exceeded.

on this row:

requestAnimFrame(Game.loop());

in this piece code:

var Game = {
  canvas: null,
  context: null,
  targetFps: 60,

  init: function() {
    canvas = document.getElementById('main-canvas');
    context = canvas.getContext('2d');

    // Resize canvas to match content
    var content = document.getElementById('primary-content');
    canvas.width = content.offsetWidth;
    canvas.height = content.offsetHeight;

    window.requestAnimFrame = (function() {
      return window.requestAnimationFrame || // Chromium
        window.webkitRequestAnimationFrame || // WebKit
        window.mozRequestAnimationFrame || // Mozilla
        window.oRequestAnimationFrame || // Opera
        window.msRequestAnimationFrame || // IE
        null;
    })();

    this.loop();
  },

  loop: function() {
    requestAnimFrame(Game.loop());
  },

  update: function() {
    // ...
  },

  draw: function() {
    // Clear background with black
    context.fillStyle = '#000';
    context.fillRect(0, 0, canvas.width, canvas.height);
  }
};

Game.init();

<div id="primary-content">
  <canvas id="main-canvas" width="400" height="400"></canvas>
</div>

It's probably something obvious I'm overlooking, but any help would be appreciated. Thanks!

Answer 1

You are calling the function right away instead of passing it:

loop: function() {
        requestAnimFrame(Game.loop());
    }

Will just keep doing Game.loop() over and over again.

What you want is:

loop: function() {
        requestAnimFrame(Game.loop);
    }

this will pass the function as an argument to requestAnimFrame, instead of calling Game.loop() and passing the result (undefined).