I think this is a hilarious way to compress and perhaps obfuscate your Javascript code. How does it work? Well, in ASCII text, which is how Javascript is encoded, 8 bits are used to encode a single character (this gives 2^8 combinations or 256 possible characters).
In an 8-bit binary image file, the 8 bits are used to represent a colour. With 8 bits, you can encode 256 different colours all the way from white to black. In colour images, 3 bytes are used for each pixel. It stores the amount of red, green and blue as values from 0 to 255 and then combines them together to give colour.
This script works by encoding the 256 possible characters in an ASCII Javascript file as 256 possible colours in a binary PNG file. <canvas> is used to read the “values” or colours of each pixel, turning it back into the ASCII equivalent. The result is then eval()-ed.
The benefit of this technique is you can then benefit from PNG compression. Of course, most servers will gzip your Javascript files anyway meaning you don’t actually benefit from a reduction in file size.
I got this idea to stuff Javascript in a PNG image and then read it out using the getImageData() method on the canvas element. Unfortunately, for now, that means only Firefox, Opera Beta and the recent WebKit nightlies work. And before anyone else points out how gzip is superior, this is in no way meant as a realistic alternative.
Anyway, since the support for the getImageData method on the canvas element isn’t widely supported yet, I guess this remains a curiosity for now and just another way to use/misuse the canvas. So, this is meant only as thing of interest and is not something you should use in most any real life applications, where something like gzip will outperform this.
This reminds me of steganography and techniques of hiding files inside JPEG images. You could perhaps use this technique to add a digital watermark to an image. Or you could store metadata inside the pixels itself and then use <canvas> to read it out. The advantage of that is your metadata can never get separated from your actual image.