Images on the Canvas - HTML5 Canvas - page 279

NOTE
As opposed to other Canvas alpha manipulations where the alpha value is between 0 and 1, the alpha
value is between 0 and 255 when manipulating it via the pixel color values.
A visual look at our basic application
Figure 4-17 is a screenshot of the simple Tile Stamper application we will create.
NOTE
Figure 4-17 is running in Safari 5.1 locally. As of this writing, this is the only browser that does not
throw an exception when trying to manipulate the pixel data of a locally loaded file when not run on
a web server.
Figure 4-17. The Tile Stamper application
The screen is broken up into two sections vertically. The top section is the 256×128 tile sheet;
the bottom is a tile map of the same size. The user will select a tile in the top section, and it
will be highlighted by a red square. The user can then stamp the selected tile to the tile map
drawing area in the lower portion. When a tile is drawn in this lower portion, we will set its
alpha value to 128 .
Adding mouse events to the canvas
We need to code our application to respond to mouse clicks and to keep track of the current x
and y positions of the mouse pointer. We will set up two global application scope variables to
store the mouse pointer's current position: