Images on the Canvas - HTML5 Canvas - page 282

var var col = Math . floor ( mouseX / 32 );

var

var row = Math . floor ( mouseY / 32 );
context . putImageData ( imageData , col * 32 , row * 32 );

The highlightTile() function

The highlightTile() function accepts three parameters:

▪ The 0-31 tileId of the tile on the tile sheet

▪ The top-left x coordinate of the tile represented by the tileId

▪ The top-left y coordinate of the tile represented by the tileId

NOTE

The x and y coordinates can be found by passing in the tileId value, but they are needed in the
onMouseDown function,sowepasstheminfromtherewhencalling highlightTile() .Thisway,we
do not need to perform the calculation twice.

The first task highlightTile() tackles is redrawing the tile sheet at the top of the screen:

context . fillStyle = "#aaaaaa" ;
context . fillRect ( 0 , 0 , 256 , 128 );
drawTileSheet ();

It does this to delete the red box around the current tile, while preparing to draw a new red
box around the tile represented by the tileId passed in.

The drawTileSheet() function then paints the tanks_sheet.png file to the canvas starting at
0 , 0 :

function function drawTileSheet (){

context . drawImage ( tileSheet , 0 , 0 );

}

Next,the highlightTile() functioncopiesthenewpixeldata(withnoredlinearoundityet)
from the canvas and places it in the ImageData instance:

ImageData = context . getImageData ( x , y , 32 , 32 );

The ImageData variablenowcontainsacopyofthepixeldataforthetilefromthecanvas.We
then loop through the pixels in ImageData.data (as described previously in the section How
ImageData.data is organized ) and set the alpha value of each to 128 .