Canvas - Introducing HTML5 - page 160

the canvas. In Figure 5.16, 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 canvas
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';