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, and fourth is the alpha amount. All values are from 0 to 255. The total number of bytes in the array is 4 * width * height.

After you get the image data, you can access and change any value in the array that you want. Note that this will only change the image in memory. After changing image data, you can write it back to the canvas using the putImageData() method. This method takes parameters for the image data to draw and the position to draw it at.

context.putImageData(data, 0, 0);