How You Can Do Cool Image Effects Using HTML5 Canvas

How You Can Do Cool Image Effects Using HTML5 Canvas(storminthecastle.com)

44 points by johnrobinsn 13 years ago | 7 comments

bsimpson 13 years ago |

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/

rzendacott 13 years ago |

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/

benaiah 13 years ago | |

This is cool, but you should really add underscore to the page, as it makes it much easier to deal with large arrays (pixel arrays being the perfect example).

timothya 13 years ago |

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

kemayo 13 years ago |

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.)

binarymax 13 years ago |

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.

dionidium 13 years ago |

Check out this project's source, too:

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