Shadow-based canvas blur

I’ve been doing a lot of work in the Javascript canvas recently. Between, Cheetos Project TP, Alltate’s Holiday Decorator and the very pretty Adidas Originals x Farm Lookbook, I’ve thought a lot about what might be possible. Ever since Project TP I’ve been intrigued by the possibility of finding a better way to make something blurry.

You can blur already, can’t you?

While it’s true that you can blur things easily in the browser – visitors in Chrome/Safari can try this scriptlet – there are a couple of problems: 1. The blur is uniform across the entire image. Lens blurs and other per-pixel operations can make very compelling images and it would be nice to have flexibility. 2. The pixel data from the blur can’t be accessed in Javascript – even if you blur a canvas, the pixels contained in the canvas aren’t affected. That means you can’t use the blur as part of any processing techniques, like the ones in Project TP. So I got excited when I noticed that html5 Canvas has the capacity to draw a shadow under your normal shapes, and when I realized that the shadow had a blur parameter. To illustrate, this is what a blur is normally for:
If you were to increase the distance from the shape to the blur, though, you’d be left with the ability to draw with a single, blurry brush:
Once you have a big, blurry brush to draw with, you can draw the pixels of the image you’re trying to blur, and voila!    
A a blurry image! As far as I can tell, this is the first time that this approach has been used to construct blurred images. It’s nice to be first!


Except it’s actually pretty slow. A 20-pixel blur on a 640×480 image takes my computer about 15 seconds to render. It’s not totally useless, though – it’s good at making a big blur of a small image that needs to be magnified, and it opens up the possibilities for a selective blur, like in a depth-of-field image. If nothing else, it’s an entertaining exercise illustrating that you can have a lot of fun exploiting the drawing API for actions it’s not really intended for. Until webGL is available for most people on the internet, we’ll need to resort to hacks like this. I can live with that!