HTML5 Guidelines for Web Developers

5.8 Pixel Manipulation 141

Figure 5.26 Yosemite National Park postcard (alternative layout)

This was a brief introduction to the topic drawImage(), using an image as a source.
You will find a detailed example of using the video element as the first parameter
of drawImage() in section 5.14.2, Playing a Video with “drawImage()”, but first
we will discuss how you can get both read and write access to pixel values on the
canvas area.

5.8 Pixel Manipulation

As methods for reading and manipulating pixel values, we have three choices:
getImageData(), putImageData(), and createImageData(). Because all three
contain the term ImageData, we first need to define what this refers to.

5.8.1 Working with the “ImageData” Object

Let’s approach the ImageData object with a 2 × 2 pixel-sized canvas, onto which
we draw four rectangles 1 × 1 pixels big and filled with the named colors navy,
teal, lime, and yellow: