308 words ~ 2-3 minsMathieu 'p01' Henri on January 10th, 2009

Tilt Shift

A very fast & simple tilt-shift effect in Canvas.

Live demo

Click and move the cursor on the canvas above to define the start and end point of the focus area.

The original image of Jodhpur rooftops by Paul Goyette is under Creative-Common.


A blurred version of the original image is generated using Canvas and drawImage(), upon rendering the tilt-shift image, a gradient is generated based on the user defined start and end points and used as a mask to show the blurred image on top of the original image. Simple.

The blurred image is generated incrementally to improve the quality of the blurring effect. Without this, it would feature heavy bilinear interpolation approximations.


This effect is more a proof of concept than an attempt to match exactly the optical properties of a real tilt-shift effect. For instance it does not use a depth map and thus can not properly process images showing tall structures. However the results are quite convincing for such a simple piece of code.