Canvas - Introducing HTML5 - page 131

another canvas element has been dynamically injected. You can
play with the demo here: http://people.mozilla.com/~prouget/
demos/DynamicContentInjection/play.xhtml .
FIGURE 5.16 Scanning a video
for bright pixels to inject dynamic
content.
In the following code example, I load an image into the can-
vas and invert all the pixels, creating a strange x-ray version of
Bruce and me ( Figure 5.17 ):
var ctx = document.querySelector('canvas').
¬ getContext('2d'),
img = document.createElement('img');
// wait until the image has loaded
img.onload = function () {
ctx.canvas.width = img.width;
ctx.canvas.height = img.height;
ctx.drawImage(img, 0, 0);
var pixels = ctx.getImageData(0, 0, img.width,
¬ img.height);
for (var i = 0, n = pixels.data.length; i < n; i += 4) {
pixels.data[i+0] = 255 - pixels.data[i+0]; // red
pixels.data[i+1] = 255 - pixels.data[i+2]; // green
pixels.data[i+2] = 255 - pixels.data[i+1]; // blue
// i + 3 is the alpha channel which we don't need
}
ctx.putImageData(pixels, 0, 0);
};
img.src = 'authors.jpg';