HTML5 Web Application Development By Example Beginner's guide

Adding effects

Now let's add some effects to the effects menu. The first one we will implement is a color inverter. It will take the image in the canvas and invert the colors so the image looks like an old film negative (remember those?). We can do this by iterating over every pixel in the image and inverting their colors.

You can get the pixels from the canvas using the context's getImageData() method. It gets the pixels for a rectangular area of the canvas. You pass it the position and size of the area:

var data = context.getImageData(0, 0, width, height);

The getImageData() method returns an array of bytes, four for each pixel, that represent each pixel's color. The first byte is the red amount, second is the green amount, third is the blue amount, ...