HTML and CSS Reference
In-Depth Information
Next, the highlightTile() function copies the new pixel data (with no red line around
it yet) from the canvas and places it in the ImageData instance:
ImageData = context.getImageData(x,y,32,32);
The ImageData variable now contains a copy of the pixel data for the tile from the canvas.
We then loop through the pixels in (as described previously in “How is organized” on page 160 ), and set the alpha value of each to 128 .
Finally, now that the ImageData variable contains the correct pixels with the altered
alpha values, we can draw the red line around the tile that's been selected to stamp on
the tile map:
var startX = Math.floor(tileId % 8) *32;
var startY = Math.floor(tileId / 8) *32;
context.strokeStyle = "red";
Example 4-16 is the entire set of code for this application.
Example 4-16. The Tile Stamper application
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>CH4EX16: Tile Stamper Application</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
function canvasSupport () {
return Modernizr.canvas;
function canvasApp(){
if (!canvasSupport()) {
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
var mouseX;
var mouseY;
var tileSheet = new Image();
tileSheet.addEventListener('load', eventSheetLoaded , false);
tileSheet.src = "tanks_sheet.png";
Search WWH ::

Custom Search