fisheye.js

fisheye.js is a javascript library for drawing images to the canvas with simple radial lens distortion using WebGL.

Visit ericleong.github.io/fisheye.js for a demo.

For those using bower

$ bower install fisheye.js

Make sure to include the library!

<script src="fisheye.js"></script>

Use it like this:

var fisheye = new Fisheye(<canvas>);

fisheye.setDistortion(<red value>, <green value>, <blue value>);
fisheye.draw(<image>);

var fisheye = new Fisheye(<canvas>);

<canvas> is an HTMLCanvasElement where the distorted image should be displayed.

fisheye.setDistortion(<red value>, <green value>, <blue value>);

Each <value> is a number, use a positive value for barrel distortion and a negative value for pincushion distortion. If only the first argument is supplied, it is used for all colors. Use different amounts of distortion for each color channel to simulate chromatic aberration.

fisheye.draw(<image>);

<image> is either an HTMLCanvasElement or an HTMLImageElement. It is the undistorted image.

fisheye.setViewport(<width>, <height>);

If the canvas size is changed, update the viewport size with this method.

fisheye.clear();

When drawing a new image, you may need to call clear() to clear the existing canvas.