var topLeftX = Math.floor((leoX - 300)/33);
var topLeftY = Math.floor((leoY - 300)/33);


//draw map
for(var rowCtr=topLeftY;rowCtr<mapRows;rowCtr++){
for(var colCtr=topLeftX;colCtr<mapCols;colCtr++){

  var tileId = tileMap[rowCtr][colCtr]+ mapIndexOffset;
  var mapSourceX = Math.floor(tileId % 8 )*33;
  var mapSourceY = Math.floor(tileId / 8 )*33;
  context.drawImage(map, mapSourceX, mapSourceY,33,33,(colCtr-topLeftX)*33,(rowCtr-        topLeftY)*33,33,33);

 }
}
//code to draw leo
context.drawImage(tilesheet, sourceX,sourceY,32,48,300,300,32,48);

//update leo's position
leoX += leoDeltaX;
leoY += leoDeltaY;