How You Can Do Cool Image Effects Using HTML5 Canvas

I was expecting this to use WebGL shaders.

When image filters came to Flash, they used a technology called PixelBender, which computed the value of each pixel independently and parallelized them on the GPU to maximize performance. There's a similar proposal for CSS that uses WebGL shaders for the parallelizing:

http://www.adobe.com/devnet/html5/articles/css-shaders.html

Opera also has a writeup on doing this in WebGL now without CSS:

http://dev.opera.com/articles/view/webgl-post-processing/

If you want to experiment with some filters like this in real time, I made a simple page to work with your webcam like this: http://mizzouacm.github.io/javascript-workshop/

You can fill in the filter function to see the effects in real time. You can also get screenshots by clicking the filtered video. It's pretty fun to see what interesting filters you can come up with, and I'm hoping to host an intro to javascript workshop utilizing the demo.

I can't take credit for the idea; I got it from the wonderful Hackers At Berkeley workshop[1]. I am starting a similar club at my university and wanted to do the same kind of workshop. I rewrote the demo because I wanted it to be real time, and I also just wanted the fun of implementing it myself :)

[1] Blog about workshop: http://blog.hackersatberkeley.com/?p=97 Demo: http://introjs.hackersatberkeley.com/

Cool article.

A made a screencast a few months ago which shows how you can move your filtering logic into a web worker so that the main thread doesn't lock up during an intense filter; it goes well together with this article: http://www.youtube.com/watch?v=GDKoh0JDTJs

You can see similar stuff on http://sta.sh/muro/

(Draw a bit, then play with the "filters" menu. There's also the ability to import other images as layers, but you'd have to sign up for an account to try that, so it's a bit more hassle just for playing with it.)

A good introductory article. It may not belong in the article itself but I would briefly mention web workers, so you don't block the UI while running some of the more complicated filters.

Check out this project's source, too:

http://mezzoblue.com/archives/2010/10/07/paintbrushjs/