Images on the Canvas - HTML5 Canvas - page 163

For example, if the user clicks on the point where mouseX = 50 and mouseY = 15 , the
calculation would work like this:
col = Math.floor(50/32); // col = 1
row = Math.floor(15/32); // row = 0
tileId = (0*7)+(1+0); // tileId = 1
This position is the second tile on the tile sheet. The onMouseClick() function then
passes the tileId and col value multiplied by 32 , and the row value multiplied by 32 ,
into the highlightTile() function. This tells the highlightTile() function the exact
tileId , row , and col the user clicked.
If the user clicked the tile map drawing area in the lower portion of the screen, the code
does the same row and column calculation. However, it then calls the putImage
Data() function and passes in the ImageData instance that holds the tile to stamp and
the top-left location to place the tile:
var col = Math.floor(mouseX / 32);
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
The x and y coordinates can be found by passing in the tileId value,
but they are needed in the onMouseDown function, so we pass them in
from there when calling highlightTile() . This way, 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 drawTileSheet(){
context.drawImage(tileSheet, 0, 0);
}