Now we know we can create and manipulate pixels in the Html5 Canvas. That opens doors to some of cool effects we can make with this tool. Here we will make an image invert its color.
The thing to remember here is, we have to get the image data from the context after our image is drawn. That means instead of

createImageData(width,height)

we have to use

getImageData(intialX,initialY,width,height)

The function for creating this look as below,

filterImage=function()
	{
		// Get the CanvasPixelArray from the given coordinates and dimensions.
		var imgd = context_one.getImageData(0, 0, width, height);
		var pix = imgd.data;
		// Loop over each pixel and invert the color.
		for (var i = 0, n = pix.length; i < n; i += 4) {
		  pix[i  ] = 255 - pix[i  ]; // red
		  pix[i+1] = 255 - pix[i+1]; // green
		  pix[i+2] = 255 - pix[i+2]; // blue
		  // i+3 is alpha (the fourth element)
		}
		// Draw the ImageData at the given (x,y) coordinates.
		context_one.putImageData(imgd, 0, 0);
	}

first of all, we take the image data object from the context. Then like the previous example, we loop over each pixel and subtract the channel values from the maximum value so as to invert the color of each pixel. And finally we have to put them into context for rendering.
I would suggest the same thing here as, please try this in every possible browser. While the same code does not work for me on Chrome, it did work in latest Opera.
The source code is here for you to download and play.
Hope that helps someone.