One of the standard tools in every front-end developer's arsenal is Adobe Photoshop. You use it to cut up Photoshop designs (if that's the way you work) and to create all kinds of image material for your site. Until recently you also needed it to add effects to your images (think desaturation, pixelation, blur etc.), but with the introduction of <canvas> we can do these things dynamically in the browser!

How does it work?

The first thing we do is replace the image with a canvas element. We create the canvas element in javascript ( document.createElement("canvas") ), give it the width and height of the original image, draw the image onto the canvas with context.drawImage(imgelement,0,0) and replace the image element with the canvas element.

imgData = context.getImageData(0, 0, canvas.width, canvas.height)

imgData.pixels

context.putImageData(0, 0, imgData)

Show us the source!

To actually do something with the newly injected canvas image data, we use. This gets us one giant array (in) with every R, G, B and A value of every pixel in the image. The rest is pretty straight forward, we apply a calculation (depending on filter) to those pixels in a for-loop and put the values back on the canvas by calling

Feel free to look around the different source files we used for this example.