Funky Image Pixels Manipulation with Canvas
Just got a few moments, so decided to play with canvas. The idea is basically based off this tutorial on Nettuts.
In this creation, we'll quickly load an image inside the 2d context of canvas (or simply, inside a canvas) and then get it's pixel data. After fetching the pixel data with
getImageData we're just gonna randomly manipulate all the R G B components and draw the manipulated image back into the canvas using
I would like to explain a bit on the pixel's data array returned by
getImageData which is basically a
CanvasPixelArray object. It's a single dimensional array where the index of the R value for each pixel is a multiple of 4. So
arr is going to be the R value for the coordinate
arr is going to be the same for
(0,1), so on and so forth. Adding +1 to the R's index is going to be the value for G (green) component, +2 for B and +3 for A. Simple!
Still confused ? MDN has a cool article for further explanation.