HTML5 Guidelines for Web Developers

142 Chapter 5—Canvas

context.fillStyle = 'navy';

context.fillRect(0,0,1,1);

context.fillStyle = 'teal';

context.fillRect(1,0,1,1);

context.fillStyle = 'lime';

context.fillRect(0,1,1,1);

context.fillStyle = 'yellow';

context.fillRect(1,1,1,1);

In the next step, we use the method getImageData(sx, sy, sw, sh) to get the

ImageData object. The four arguments determine the desired canvas section as a

rectangle, as shown in Figure 5.27:

ImageData = context.getImageData(

0,0,canvas.width,canvas.height

);

Figure 5.27 The “ImageData” object

The ImageData object has the attributes ImageData.width, ImageData.height,

and ImageData.data. The latter hides the actual pixel values in the so-called

CanvasPixelArray. This is a flat array with red, green, blue, and alpha values for

each pixel in the selected section, starting at the top left, from left to right and