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.

E se você quiser impedir que o movimento ultrapasse a grid de tiles, o caminho mais fácil é acrescentar isso:

<!-- language: lang-javascript -->

        camX = Math.max(0, Math.min(camX, fieldWidth * tsize - camWidth));
        camY = Math.max(0, Math.min(camY, fieldHeight * tsize - camHeight));

O lugar em que isso será acrescentado depende de como o `camX` e o `camY` serão manipulados no jogo, mas os dois lugares mais prováveis são:

* O final da função `addEventListener`, especialmente se eles não forem alterados em nenhum outro lugar que não seja esta função.

* O começo da função `draw`, se você quiser corrigir estes valores apenas antes do desenho e deixar que eles sejam alterados a vontade do lado de fora dessa função.

E neste caso, ao acrescentar essas duas linhas, você pode remover o desenho do fundo azul, que corresponde a estas outras duas linhas:

        ctx.fillStyle = "#0000FF";
        ctx.fillRect(0, 0, camWidth, camHeight);