Dei uma arrumada no seu código e ficou assim: <!-- begin snippet: js hide: false --> <!-- language: lang-js --> var canvas = document.getElementById("canvas1"); var ctx = canvas.getContext("2d"); var grass = new Image(); var sand = new Image(); grass.src = "http://i42.tinypic.com/2ljm6w9.png"; sand.src = "http://www.tibiawiki.com.br/images/7/7a/Sand_Tile.gif"; var images = [grass, sand]; var tsize = 32; // Tile size. var mapArray = [[0,0,0,0,0,0,0,0,0,1,0,0,0], [0,0,0,0,0,0,0,0,0,1,0,0,0], [0,0,0,0,0,0,0,0,0,1,0,0,0], [0,0,0,0,0,0,0,0,0,1,0,0,0], [0,0,0,0,0,0,0,0,0,1,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0], [1,1,1,1,1,1,1,1,1,1,1,1,1]]; var fieldWidth = mapArray[0].length; var fieldHeight = mapArray.length; // Cam configs. var camX = 0; var camY = 0; var camWidth = 320; var camHeight = 160; // Others. var offsetX = 0; var offsetY = 0; function draw() { requestAnimationFrame(draw); var startCol = Math.floor(camX / tsize); var endCol = startCol + (camWidth /tsize); var startRow = Math.floor(camY / tsize); var endRow = startRow + (camHeight / tsize); var offsetX = -camX + startCol * tsize; var offsetY = -camY + startRow * tsize; console.log(startCol + "," + endCol + "," + startRow + "," + endRow); ctx.fillStyle = "#0000FF"; ctx.fillRect(0, 0, camWidth, camHeight); for (var r = Math.max(0, startRow); r <= endRow && r < fieldHeight; r++) { for (var c = Math.max(0, startCol); c <= endCol && c < fieldWidth; c++) { var x = (c - startCol) * tsize + offsetX; var y = (r - startRow) * tsize + offsetY; ctx.drawImage(images[mapArray[r][c]], x, y); } } } document.addEventListener("keydown", function(e) { if (e.keyCode == 40) { camY += 1; e.preventDefault(); } if (e.keyCode == 39) { camX += 1; e.preventDefault(); } if (e.keyCode == 38) { camY -= 1; e.preventDefault(); } if (e.keyCode == 37) { camX -= 1; e.preventDefault(); } }); draw(); <!-- language: lang-html --> <html> <head> <title>Scrolling Tiled Map</title> </head> <body> <canvas id="canvas1" width="320" height="160" style = "border: 1px solid black;"></canvas> <script src="javascript.js"></script> </body> </html> <!-- end snippet --> As mudanças que fiz são: 1. Implementei o scroll para as teclas acima e abaixo. De acordo com a sugestão do Bacco, adicionei um `e.preventDefault()` em cada tecla para que o scroll da página não ocorra e venha a bagunçar a experiência do jogo. 2. Coloquei as imagens em um array, assim fica mais fácil acessá-las pelos índices que estiverem no `mapArray`. Isso elimina a necessidade de usar `if(mapArray[r][c] == 0)` e também faz com que fique bem fácil de se adicionar novas figuras. 3. Coloquei um fundo azul padrão. Esse fundo será visível se a sua viewport (`camX`, `camY`, `camX + camWidth`, `camY + camHeight`) visualizar áreas que possam estar fora da matriz, além das suas bordas. Sem isso, o resultado é que os pixels antigos eram largados para trás, resultando em sujeira e artefatos no desenho para áreas que estiverem fora da matriz. 4. Aqui você usou `startCol` ao invés de `startRow`: var y = (r - startCol) * tsize + offsetY; 5. Introduzi as variáveis `fieldWidth` e `fieldHeight` para eu poder ter o tamanho da matriz facilmente. 6. Adicionei a palavra-chave `var` nas variáveis `offsetX` e `offsetY`. 7. Alterei a inicialização nos laços `for` para o seguinte: var r = Math.max(0, startRow); var c = Math.max(0, startCol); O motivo de fazer isso é para nunca acessar `mapArray[r][c]` quando `r` ou `c` forem negativos (ou seja, ultrapassando os limites esquerdo e/ou superior da matriz). 8. Alterei a condição de parada dos laços `for` para o seguinte: r <= endRow && r < fieldHeight; c <= endCol && c < fieldWidth; O motivo das expressões após o `&&` é para ele não acessar `mapArray[r][c]` quando `r` ou `c` ultrapassar os limites direito e/ou inferior da matriz. Já o motivo pelo qual eu uso `<=` ao invés de `<` é que o viewport pode não se alinhar exatamente a grid de tiles. Desta forma, embora a altura do viewport seja igual a de 5 tiles, podem haver 6 linhas de tiles visíveis, sendo 4 linhas completas, metade da primeira linha visível na parte superior e metade da última linha visível na parte inferior. O mesmo princípio se aplica também às colunas.