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