Images on the Canvas - HTML5 Canvas - page 148

, [32,31,31,31,1,31,31,31,31,32]
];
function eventSheetLoaded() {
drawScreen()
}
function drawScreen() {
for (var rowCtr=0;rowCtr<mapRows;rowCtr++) {
for (var colCtr=0;colCtr<mapCols;colCtr++){
var tileId = tileMap[rowCtr][colCtr]+mapIndexOffset;
var sourceX = Math.floor(tileId % 8) *32;
var sourceY = Math.floor(tileId / 8) *32;
context.drawImage(tileSheet, sourceX,
sourceY,32,32,colCtr*32,rowCtr*32,32,32);
}
}
}
Figure 4-10. The tile map painted on the canvas
Next, we are going to leave the world of tile-based Canvas development (see Chap-
ter 9 for an example of a small game developed with these principles). The final section
of this chapter discusses building our own simple tile map editor. But before we get
there, let's look at panning around and zooming in and out of an image.