MagicEye.js is a JavaScript library for generating "Magic Eye" images in the browser. Technically, it generates single-image random dot stereograms, or SIRDS.

In the above example, pixel values from an HTML5 Canvas are turned into depth data, which are then used to generate a Magic Eye image. The code looks something like this:

var canvas = document.getElementById('canvas'); MagicEye.render({ el: 'magiceye', depthMapper: new MagicEye.CanvasDepthMapper(canvas) });

More info about MagicEye.js and how to use it can be found on Github.

Fork and enjoy!

More demos:

Text to Magic Eye and JPG to Magic Eye