HTML and CSS Reference
In-Depth Information
Figure 17-2:
Alpha values and transparency.
To get to the data for a specific pixel in an image, you need to determine the number of elements that pixel
is in from the start of the array. Because each pixel consists of four elements, the length of each row of data is
therefore four times the pixel width of the image. To get the row offset, you need to multiply that number by
the
y
position. To index into the row the correct number of elements, take the
x
value and multiply by 4. Next,
because you want the alpha value of that pixel, add 3 to the result, which results in the following code:
alpha = imageData.data[y*4*imageData.width + x*4 + 3];
Got that? Good because you actually need to do it twice over each iteration of a two-dimensional loop.
You're going to loop over all the pixels of your little lander, and for every pixel on the ship that is not transpar-
ent, compare it with the matching pixel of the background.
