Edit in JSFiddle

// columns per row : 12
	// rows : 12
	
	const TILE_WIDTH  = 16;
	const TILE_HEIGHT = 16;
	const DEST_WIDTH = 64;
	const DEST_HEIGHT = 64;
	const NUM_COLS = 12;
	const NUM_ROWS = 12;
	
	var theCanvas = document.getElementById('canvas');
	var context = theCanvas.getContext('2d');

	var heroCanvas = document.getElementById('hCanvas');
	var hCtx = heroCanvas.getContext('2d');
	var tileSheet= new Image();
	

	var counter= 0;

	
	tileSheet.addEventListener('load', eventPicLoaded , false);
	tileSheet.src="https://sites.google.com/site/hillstreesplants/images/tiles_16.png?attredirects=0&d=1";
	
	var forest = new Tile(0, 0);
	var sand = new Tile(2, 0);
	var nightForest = new Tile(6 , 0);
	var water = new Tile(8, 0);
	var swamp = new Tile(4,0);
	var mountain = new Tile(3,0);
	var nightSand = new Tile(9,0);
	function eventPicLoaded() {
		startUp();
	}
	

	var hero= {
		x : 2 * DEST_WIDTH,
		y : 1 * DEST_HEIGHT,
		speed : 8,
		direction : "down",
		/* frame order: walk down walk up walk left walk right */
		currentFrame : 0,
		frames:[
			new Frame(0,1), new Frame(1,1),
			new Frame(2,1), new Frame(3,1),
			new Frame(4,1), new Frame(6,1),
			new Frame(5,1), new Frame(7,1) 
		],
		
		getDirection : function(){
			if(hero.direction == "down"){
				if(hero.y >= DEST_HEIGHT * 10){
					hero.direction = "right";
					hero.currentFrame = 6;
				}
			}
			if(hero.direction == "up"){
				if(hero.y  <= DEST_HEIGHT * 3){
					hero.direction = "left"
					hero.currentFrame = 4;

				}
			}
			if(hero.direction == "right"){
				if(hero.x >= DEST_WIDTH *8){
					hero.direction = "up";
					hero.currentFrame = 2;
				}
			}
			if(hero.direction == "left"){
				if(hero.x <= DEST_WIDTH * 2){
				hero.direction = "down";
				hero.currentFrame = 0;
				}
			}		
		},
		move : function(){
			//console.log("hero frame = " + hero.currentFrame);
			
			if(hero.direction == "down"){
				if(hero.currentFrame != 0){
					hero.currentFrame = 0;
				}
				else{
					hero.currentFrame ++;
				}		
			} 
			
			if(hero.direction == "up"){
				if(hero.currentFrame != 2){
					hero.currentFrame = 2;
				}
				else{
					hero.currentFrame ++;
				}		
			} 
			if(hero.direction == "left"){
				if(hero.currentFrame != 4){
					hero.currentFrame = 4;
				}
				else{
					hero.currentFrame ++;
				}		
			} 
			if(hero.direction == "right"){
				if(hero.currentFrame != 6){
					hero.currentFrame = 6;
				}
				else{
					hero.currentFrame ++;
				}		
			} 
			
			if(hero.direction == "down"){
				hero.y += hero.speed;
			}
			if(hero.direction == "up"){
				hero.y -= hero.speed;
			}
			if(hero.direction == "right"){
				hero.x += hero.speed;
			}
			if(hero.direction == "left"){
				hero.x -= hero.speed;
			}
		},
		draw : function(){
			
			hero.frames[hero.currentFrame].draw(hero.x, hero.y);
			
		}
	}
	
	function Tile(x, y, passable){
		//passable take a bool true if player can walk on tile, false if not
		this.x = x;
		this.y = y;
		this.passable = passable;
		Tile.prototype.draw = function(drawX, drawY){
			context.drawImage(tileSheet, TILE_WIDTH * this.x, TILE_HEIGHT * this.y, TILE_WIDTH, TILE_HEIGHT, drawX * DEST_WIDTH, drawY * DEST_HEIGHT, DEST_WIDTH, DEST_HEIGHT);
		}
	}

	function Frame(x,y){
		this.x = x;
		this.y = y;
	
		Frame.prototype.draw = function(hx,hy){
			hCtx.clearRect(0,0,6400,6400);
			hCtx.drawImage(tileSheet, TILE_WIDTH * this.x, TILE_HEIGHT * this.y, TILE_WIDTH, TILE_HEIGHT, hx , hy, DEST_WIDTH, DEST_HEIGHT);
		}
	}
	
	/*
	0 = water
	1 = sand
	2 = forest
	3 = mountain
	4 = swamp
	5 = nightSand
	6 = nightForest
	
	*/
	var map = {
		layout : [
			[0,0,0,0,0,0,0,0,0,0,0,0],
			[0,0,1,1,1,0,0,1,1,1,0,0],
			[0,1,1,1,0,0,2,1,2,1,1,0],
			[0,1,1,2,2,2,2,2,2,2,1,0],
			[0,1,2,2,2,2,2,2,2,2,1,0],
			[0,4,2,2,1,2,2,1,2,2,0,0],
			[0,4,4,2,2,2,2,1,1,0,0,0],
			[0,4,4,2,2,1,3,3,1,2,0,0],
			[0,4,1,2,2,2,1,1,2,2,1,0],
			[0,1,1,2,2,2,2,2,2,2,1,0],
			[0,0,1,2,2,1,1,2,2,1,0,0],
			[0,0,0,0,0,0,0,0,0,0,0,0]
		],
		tileList : [water,sand,forest,mountain,swamp,nightSand,nightForest],
		draw : function(){
			for( var row = 0; row < NUM_ROWS; row++){
				for(var col = 0; col < NUM_COLS; col++){
					map.tileList[this.layout[row][col]].draw(col,row);
				}
			}
		}
	}
	
	function drawScreen() {		 
		map.draw();
	}

	function startUp() {
		drawScreen();
		setInterval(function(){
			hero.getDirection();
			hero.move();
			hero.draw();
			}, 1000/8)}