Would like to understand why this "setInterval" in my code isnt working?

Question

Im trying to control the refresh rate of drawn objects using javascript in canvas. I've gone over the w3.school explanations and examples as to how to clear screen and use set interval in regards to canvas but im not sure why the below "setInterval" is not actually running the "generateGame()" function every 1 second.

buildCanvas();

  function buildCanvas(){
    let c = document.getElementById('myCanvas');
    let drwMthd = c.getContext('2d');

    setInterval(generateGame(c, drwMthd), 1000);

    function generateGame(c, drwMthd){
      refreshC(c, drwMthd);
      drawObjects(drwMthd);
      console.log('reset');
    }
  }

  function refreshC(c, drwMthd){
    drwMthd.clearRect(0, 0, c.width, c.height);
    console.log('all cleared');
  }

  function drawObjects(drwMthd){
    boxGenerator(10, 10, 10, 10, "green", drwMthd);
    boxGenerator(1, 1, 10, 10, "green", drwMthd);
    console.log('all drawn');
  }

  function boxGenerator(top, left, width, height, color, drwMthd){
    drwMthd.fillStyle = color;
    drwMthd.fillRect(top, left, width, height, color);
  }

    body {
      background-color: black;
    }

  <canvas id="myCanvas" width="300" height="60" style="background-color: white">

I also used a console.log to print reset every 1 second to test if it was the actual drawing that was messing the interval up.

function buildCanvas(){
    let c = document.getElementById('myCanvas');
    let drwMthd = c.getContext('2d');

    setInterval(generateGame(c, drwMthd), 1000);

    function generateGame(c, drwMthd){
      refreshC(c, drwMthd);
      drawObjects(drwMthd);
      console.log('reset');
    }
}

Answer 1

You execute the generateGame function instead of binding it and then the setInterval treats its return value, which is void.

To pass parameters, you need to use the bind keyword. Notice that the first element is the scope of this the function should operate with.

function buildCanvas() {
    var canvas = document.createElement('canvas');
    var drawMethod = canvas.getContext('2d');
    setInterval(generateGame.bind(this, canvas, drawMethod), 1000);
    function generateGame(c, drwMthd) {
        console.log(c, drwMthd);
    }
}
buildCanvas();

Answer 2

setInterval needs a function reference. The problem is that you are not passing a function reference, instead you're invoking the generateGame function. And since the generateGame function doesn't explicitly return anything, it returns undefined. So you're setting an interval to an undefined function.

A solution would be to pass an anonymous function that calls the generateGame function :

setInterval(function () {
    generateGame(c, drwMthd)
    }, 1000);

function buildCanvas(){
    let c, drwMthd;
    /*let c = document.getElementById('myCanvas');
    let drwMthd = c.getContext('2d'); */

    setInterval(function () {
    generateGame(c, drwMthd)
    }, 1000);

    function generateGame(c, drwMthd){
    /*
      refreshC(c, drwMthd);
      drawObjects(drwMthd);*/
      console.log('reset');
    }
}
buildCanvas();

Answer 3

Please Refer Below Fiddle

Fiddle

setInterval(function(){
    generateGame(c, drwMthd)
}, 1000);