Images on the Canvas - HTML5 Canvas - page 284

function function eventSheetLoaded () {

startUp ();

}

function function startUp (){

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

}

function function drawTileSheet (){

context . drawImage ( tileSheet , 0 , 0 );

}

function function highlightTile ( tileId , x , y ){

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

imageData = context . getImageData ( x , y , 32 , 32 );
//loop through imageData.data. Set every 4th value to a new value
for for ( j = 3 ; j < imageData . data . length ; j += 4 ){

imageData . data [ j ] = 128 ;

}

var var startX = Math . floor ( tileId % 8 ) * 32 ;

var var startY = Math . floor ( tileId / 8 ) * 32 ;

context . strokeStyle = "red" ;
context . strokeRect ( startX , startY , 32 , 32 )

}

function function onMouseMove ( e ) {

mouseX = e . clientX - theCanvas . offsetLeft ;
mouseY = e . clientY - theCanvas . offsetTop ;

}

function function onMouseClick ( e ) {

console . log ( "click: " + mouseX + "," + mouseY );
iif ( mouseY < 128 ){
//find tile to highlight
var

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

var

var tileId = ( row * 7 ) + ( col + row );