Images on the Canvas - HTML5 Canvas - page 146

Rather than using the mapIndexOffset variable, we could loop through
the array of data and subtract 1 from each value. This would be done
before the game begins, saving the extra processor overload from per-
forming this math operation on each tile when it is displayed.
Map height and width
We also are going to create two variables to give flexibility to our tile map display code.
These might seem simple and unnecessary now, but if you get in the habit of using
variables for the height and width of the tile map, it will be much easier to change its
size in the future.
We will keep track of the width and height based on the number of rows in the map
and the number of columns in each row:
var mapRows = 10;
var mapCols = 10;
Storing the map data
The data that was output from Tiled was a series of rows of numbers starting in the top
left and moving left to right, then down when the rightmost column in a row was
completed. We can use this data almost exactly as output by placing it in a two-
dimensional array:
var tileMap = [
[32,31,31,31,1,31,31,31,31,32]
, [1,1,1,1,1,1,1,1,1,1]
, [32,1,26,1,26,1,26,1,1,32]
, [32,26,1,1,26,1,1,26,1,32]
, [32,1,1,1,26,26,1,26,1,32]
, [32,1,1,26,1,1,1,26,1,32]
, [32,1,1,1,1,1,1,26,1,32]
, [1,1,26,1,26,1,26,1,1,1]
, [32,1,1,1,1,1,1,1,1,32]
, [32,31,31,31,1,31,31,31,31,32]
];
Displaying the map on the canvas
When we display the tile map, we simply loop through the rows in the tileMap array,
and then loop through the columns in each row. The tileID number at [row]
[column] will be the tile to copy from the tile sheet to the canvas. row *32 will be the
y location to place the tile on the canvas; col*32 will be the x location to place the tile: