Question

I am trying to visualise a reinforcement agent moving through a 2d grid. I coded up a visualisation using canvas, and everytime my agent makes a move I try to update the grid. I was hoping to see an animation, but instead I see nothing until the agent has completed all this moves and I see the final state. If I step through with Google Chromes Developer tools then I can see the individual steps. I do not think it is a problem of my code just running to fast, because each step takes a couple of seconds.

My implementation is as follows, with the function gridWorld() called once to create a new object and executeAction called every time I want to draw. As shown I have used ctx.save(), and ctx.restore(), but that is only an attempt to solve this problem, and it seems to have made no difference.

Thanks

var execute gridWorld = function(action) {
   var canvas = document.getElementById("grid");
   this.ctx = canvas.getContext("2d");

   this.executeAction = function(action) { 
      this.ctx.save()
      // ... Do reinforcement learning stuff
      // For every cell in grid, do:
         this.ctx.fillStyle = "rgb(244,0,0)"
         this.ctx.fillRect(positionX, poisitonY, 10,10)

      this.ctx.restore();
  }
}

Answer 1

Even if the code takes a long time to execute, the browser will not update the display until there is an actual break in the code. Use setTimeout() to cause a break in code execution whenever you want the canvas to update.