title: redrawing canvas html5 without flickering
body: <p>I've a screen being redraw every 25ms, and images are flickering, here is my code</p>
  
  <pre><code>                var FRAME_RATE = 40;
                  var intervalTime = 1000/FRAME_RATE;
                  gameLoop();
  
                  function gameLoop(){
                      context.clearRect(0, 0, 640, 640);
                      renderMap();
                      window.setTimeout(gameLoop, intervalTime);  
                  }
  </code></pre>
  
  <p>and here is renderMap() function</p>
  
  <pre><code>function renderMap(){
                      var startX = playerX - (screenW / 2);
                      var startY = playerY - (screenH / 2);
  
                      maxX = playerX + (screenW / 2);
                      maxY = playerY + (screenH / 2);
                      $.getJSON('mapa3.json', function(json){
                          for (x = startX; x &lt; maxX; x=x+32){ 
                              for (y = startY; y &lt; maxY; y=y+32){
                                  intTile = json.layers[0].data[((y/32)* 100) + (x/32)];
                                  context.putImageData(getTile(intTile - 1), x - startX, y - startY);
                              }
                          } 
                      });
  
                      var imgCharacter = new Image();
                      imgCharacter.src = 'char.png';
  
                      var posX = (screenW - imgCharacter.width) / 2;
                      var posY = (screenH - imgCharacter.height) / 2;
                      imgCharacter.onload = function(){context.drawImage(imgCharacter, posX, posY)}       
                  }
  </code></pre>
  
  <p>What changes do I need to make to the code to stop flickering? </p>