CODEWITHSUNDEEP
javascripthtmlanimationcanvas
zenna
zenna

Reputation: 9206

Canvas element not updating

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();
  }
}

Upvotes: 1

Views: 4333

Answers (2)

Loktar
Loktar

Reputation: 35319

Your not going to see animations because they are happening way too fast. You need to break them up like in the following example.

Live Demo

If I did something like this for example 

for(x = 0; x < 256; x++){
    player.x = x;
    ctx.fillStyle = "#000";
    ctx.fillRect(0,0,256,256);
    ctx.fillStyle = "#fff";
    ctx.fillRect(player.x,player.y,4,4);
}

You would only ever see the player at the end of the board every time that function is called, and you wouldn't see any of the animations in between, because the loop runs too fast. Thats why in my live demo I do it in small increments and call the draw every 15 milliseconds so you have a chance to actually see whats being put on the canvas.

Upvotes: 1

John Stimac
John Stimac

Reputation: 5491

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.

Upvotes: 1

Related Questions