Images on the Canvas - HTML5 Canvas - page 145

Figure 4-9. The tile map example in Tiled
The data is an XML data set used to load and save tile maps. Because of the open nature
of this format and the simple sets of row data for the tile map, we can use this data
easily in JavaScript. For now, we are only concerned with the 10 rows of comma-
delimited numbers inside the <data> node of the XML—we can take those rows of data
and create a very simple two-dimensional array to use in our code.
Displaying the Map on the Canvas
The first thing to note about the data from Tiled is that it is 1 relative , not 0 relative.
This means that the tiles are numbered from 1-32 instead of 0-31. We can compensate
for this by subtracting one from each value as we transcribe it to our array, or
programmatically during our tile sheet drawing operation. We will do it programmat-
ically by creating an offset variable to be used during the draw operation:
var mapIndexOffset = -1;