148 Chapter 5—Canvas
var swapChannels = function(r,g,b,a,order) {
var rgba = [r,g,b,a];
return [
rgba[order[0]],
rgba[order[1]],
rgba[order[2]],
rgba[order[3]]
];
};The last method, monoColor(), sets each pixel’s RGB component to a particu-
lar color, using the starting pixel’s gray value as an alpha component. When the
function is called, the fourth parameter defines the desired color as an array of
RGB values—in our case, blue with color= [0, 0, 255]:var monoColor = function(r,g,b,a,color) {
return [
color[0],
color[1],
color[2],
255-(parseInt((r+g+b)/3.0))
];
};The filters we have introduced here are still rather simple, changing the color
values of individual pixels without taking into account the neighboring pixels. If
you factor these into the calculation, you can achieve more complex methods,
such as sharpen, unsharp mask, or edge detection.Discussing such filters in detail would go beyond the scope of this book. If you
want to explore more, check out Jacob Seidelin’s Pixastic Image Processing
Library (http://www.pixastic.com/lib). More than 30 JavaScript filters, available
free under the Mozilla Public License, are just waiting to be discovered.In the meantime, let’s turn to Thomas Porter and Tom Duff, two Pixar Studios
gurus who created a sensation back in 1984 with their article on alpha blending
techniques. The digital compositing techniques they described not only earned
them a prize at the Academy of Motion Picture Arts and Sciences, but also found
their way into the Canvas specification.