JavaScriptのcanvas内でのマップスクロールのやり方がわかりません。

前提・実現したいこと

JavaScriptでちょっとしたゲームを作っているのですが、マップスクロールの方法がわからなかった為、translateでキャラが特定の位置に来たらマップをずらすという方法を取っていました。
配列が０番目から取得されるため右、下にずらすだけならできるのですが、上と左にずらす方法がわかりません。

マップスクロール、もしくはtranslateでのマップスクロールの方法を教えてください。
ちなみにcanvas内で作っています。

該当のソースコード

javascript
1var canvas = document.getElementById('canvas');
2canvas.width = 320;
3canvas.height = 256;
4var Human = new Object();
5Human.img = new Image();
6Human.img.src = 'キャラの画像';
7Human.x = 0;
8Human.y = 0;
9Human.move = 0;
10
11var positionX = 0
12
13var ctx = canvas.getContext('2d');
14
15var map = [
160,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
170,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
180,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
190,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
200,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
210,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
220,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
230,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
240,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
250,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
26];
27
28function main(){
29ctx.fillStyle = "rgb( 0, 0, 0 )";
30ctx.fillRect(0, 0, 480, 320);
31
32for (var y=0; y<map.length; y++) {
33		for (var x=0; x<map[y].length; x++) {
34			if (map[y][x] === 0)
35                ctx.drawImage(mapchip,16,160,32,32,32*x,32*y,32,32);
36}
37}
38ctx.drawImage(Human.img, Human.x, Human.y);
39
40window.addEventListener("keydown", keydownfunc, false);
41window.addEventListener("keyup", keyupfunc, false);
42
43if ( Human.move === 0 ) {
44    if ( key.right === true ) {
45        var x = Human.x/32;
46        var y = Human.y/32;
47    if(Human.x === 256 && positionX === 0){
48        ctx.translate(-32,0);
49        positionX = 1;
50    }else if(Human.x === 288 && positionX === 1){
51        ctx.translate(-32,0);
52        positionX = 2;
53    }
54    if (map[y][x] === 0) {
55       Human.move = 32;
56       key.push = 'right';
57    }
58    }
59    }
60}
61
62if (Human.move > 0) {
63    Human.move -= 4;
64if ( key.push === 'right' ) Human.x += 4;
65}
66window.requestAnimationFrame( main );
67}
68window.addEventListener('load', main(), false);
69
70function keydownfunc( event ) {
71var key_code = event.keyCode;
72if(key_code === 39){
73key.right = true;
74Human.img.src = 'キャラが右を向く画像';
75}
76event.preventDefault();
77}
78
79function keyupfunc( event ) {
80var key_code = event.keyCode;
81if(key_code === 39) key.right = false;
82}
83
84キャラを動かすコードですが、右だけ書いています。ほかの方角もこの書き方で書いています。