Blurring an image with JavaScript should be a simple operation, however doing it in an optimal and fast way is not so easy.
The cheapest way to blur an image is to copy the image and overlay it multiple times in slightly different positions. However, in order to create a better and fast blur you need… Mario Klingemann, aka Quasimondo! Mario has created several different techiniques that suit the type of blurring required, whether you need an accurate algorithm, a super fast algorithm, or a bit of both! Check out these examples:
All the code is open source and available on Mario’s site, including usage examples.
Going forward, we’ll soon have even more options available with CSS filter effects. To use them you’ll need to download a build of WebKit Nightly or the latest Google Chrome Canary, but they’re very promising and allow you to apply any kind of custom filter to any HTML element (not just canvas) using fragment shaders. Exciting times!
Check out the demos using WebKit Nightly or Chrome Canary.