Images on the Canvas - HTML5 Canvas - page 292

We also need to draw each of the two images to the Canvas briefly and store the ImageData
value for each:
context . drawImage ( blueObject . image , 0 , 0 );
blueObject . blueImageData = context . getImageData ( 0 , 0 , blueObject . width ,
blueObject . height );
context . clearRect ( 0 , 0 , theCanvas . width , theCanvas . height ); redObject . x = 348 ;
context . drawImage ( redObject . image , 0 , 0 );
redObject . redImageData = context . getImageData ( 0 , 0 , redObject . width ,
redObject . height );
context . clearRect ( 0 , 0 , theCanvas . width , theCanvas . height );
We draw at 0,0 for ease of use, but these could be drawn on a second hidden canvas or any-
where on the current canvas. We want to erase them right after we place them because we
need to store only the pixel color data for each. Specifically, we will be using every fourth
item in the array of pixel data. This is the transparency value of the pixel.