Images on the Canvas - HTML5 Canvas - page 260

Example 4-10. Painting the tile map to the Canvas
var

var tileSheet = new new Image ();

tileSheet . addEventListener ( 'load' , eventSheetLoaded , false false );

tileSheet . src = "tanks_sheet.png" ;

var var mapIndexOffset = - 1 ;

var var mapRows = 10 ;

var

var mapCols = 10 ;

var 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 ]

];

function function eventSheetLoaded () {

drawScreen ()

}

function function drawScreen () {

for

for ( var var rowCtr = 0 ; rowCtr < mapRows ; rowCtr ++ ) {

for for ( var var colCtr = 0 ; colCtr < mapCols ; colCtr ++ ){

var var tileId = tileMap [ rowCtr ][ colCtr ] + mapIndexOffset ;

var

var sourceX = Math . floor ( tileId % 8 ) * 32 ;
var var sourceY = Math . floor ( tileId / 8 ) * 32 ;

context . drawImage ( tileSheet , sourceX ,
sourceY , 32 , 32 , colCtr * 32 , rowCtr * 32 , 32 , 32 );

}

}

}