title: HTML5 canvas viewport for rpg game map not generating
body: <p>I'm working my way through some online examples and trying to get my head around how a HTML5 game may be put together.</p>
  
  <p>I've got my head around the basics, such as the game loop, and separating the update and render logic.</p>
  
  <p>I'm at the stage where I can generate a map from a tileset, and render a character who can walk around and have its sprite animate as it moves.</p>
  
  <p>What I've struggling with is the way that the viewport follows the character as he moves. It's mostly working, the camera will follow - however, it has a very strange effect on the map that is generated.</p>
  
  <p>The code so far is pretty long, but I've created a JSFiddle of the current way it works, and it illustrates the problems I'm having. The character can be moved with the arrow keys.</p>
  
  <p><strong><a href="http://jsfiddle.net/zdMSx/3/embedded/result/" rel="nofollow">jsFiddle of the current issue</a></strong></p>
  
  <p><strong><a href="http://jsfiddle.net/zdMSx/3/light/" rel="nofollow">jsFiddle of the code</a></strong></p>
  
  <p>Incidentally, I've noticed if the character walks into the top left corner, it seems to be OK.</p>
  
  <p>The code that  is generating the map is:</p>
  
  <p>tileSize = game.currentMap.tileset.tileWidth;</p>
  
  <pre><code>if (player.x &gt;= (game.viewport.x / 2)) r = Math.floor(player.x - ((map.width * map.tileset.tileWidth) / 2))
  
  for (r = Math.floor(game.viewport.x / map.tileset.tileWidth); r &lt; Math.floor(game.viewport.x / map.tileset.tileWidth) + canvas.width / map.tileset.tileWidth + 1; r++) {
      for (c = Math.floor(game.viewport.y / map.tileset.tileHeight); c &lt; Math.floor(game.viewport.y / map.tileset.tileHeight) + canvas.height / map.tileset.tileHeight + 1; c++) {
          var tile = ground[r][c];
          var tileRow = (tile / game.currentMap.tileset.tilesInImgRow) | 0; // Bitwise OR operation
          var tileCol = (tile % game.currentMap.tileset.tilesInImgRow) | 0;
          ctx.drawImage(
          game.currentMap.tileset.image, (tileCol * tileSize), (tileRow * tileSize),
          tileSize,
          tileSize, (c * tileSize) - game.viewport.x, (r * tileSize) - game.viewport.y,
          tileSize,
          tileSize);
  
          tile = layer1[r][c];
          tileRow = (tile / game.currentMap.tileset.tilesInImgRow) | 0;
          tileCol = (tile % game.currentMap.tileset.tilesInImgRow) | 0;
          ctx.drawImage(
          game.currentMap.tileset.image, (tileCol * tileSize), (tileRow * tileSize),
          tileSize,
          tileSize, (c * tileSize) - game.viewport.x, (r * tileSize) - game.viewport.y,
          tileSize,
          tileSize);
  
  
      }
  }
  </code></pre>
  
  <p>However, as I'm studying the code from other resources - I'm a bit stuck as to whether the issue is being caused by this function or the function which generates and updates the viewport.</p>
  
  <p>Any suggestions?</p>
  
  <p><strong>Update</strong></p>
  
  <p>The code that adjusts the viewport so that if the character is near the edge of the map, it no longer remains in the center of the viewport:</p>
  
  <pre><code>   if (game.viewport.x &lt;= 0) dX = player.x;
  else if (game.viewport.x &gt;= game.currentMap.tileset.tileWidth * game.currentMap.width - canvas.width) dX = player.x - game.viewport.x;
  else dX = Math.round(canvas.width / 2 - player.width / 2);
  if (game.viewport.y &lt;= 0) dY = player.y;
  else if (game.viewport.y &gt;= game.currentMap.tileset.tileHeight * game.currentMap.height - canvas.height) dY = player.y - game.viewport.y;
  else dY = Math.round(canvas.height / 2 - player.height / 2);
  </code></pre>
  
  <p>And the code that updates the viewport when the character is moved:</p>
  
  <pre><code>if (player.x + player.width / 2 &lt; canvas.width / 2) {
      game.viewport.x = 0;
  } else if (player.x + canvas.width / 2 + player.width / 2 &gt;= map.tileset.tileWidth * map.width) {
      game.viewport.x = map.tileset.tileWidth * map.width - canvas.width;
  } else {
      game.viewport.x = Math.floor(player.x - (canvas.width / 2 - player.width / 2));
  
  }
  
  
  if (player.y + player.height / 2 &lt; canvas.height / 2) {
      game.viewport.y = 0;
  } else if (player.y + canvas.height / 2 + player.height / 2 &gt;= map.tileset.tileHeight * map.height) {
      game.viewport.y = map.tileset.tileHeight * map.height - canvas.height;
  } else {
      game.viewport.y = Math.floor(player.y - (canvas.height / 2 - player.height / 2));
  
  }
  </code></pre>
  
  <p>The viewport is initially set using the following:</p>
  
  <pre><code>var game = {
  images: 0,
  imagesLoaded: 0,
  backgroundColor: '#000',
  viewport: {
      x: Math.floor(player.x - (canvas.width / 2 - playerSpriteSize / 2)),
      y: Math.floor(player.y - (canvas.height / 2 - playerSpriteSize / 2))
  },
  currentMap: map,
  fps: 0,
  lastfps: 0,
  fpsTimer: 0
  </code></pre>
  
  <p>}</p>