Jacob Seidelin writes about JavaScript and HTML5 canvas experiments, including games, image tricks, and a ray casting engine.
HN links it for the technique of compressing JavaScript into PNG images, and for canvas demos like Super Mario Kart.
The CANVAS tag allows per pixel placement. It's what makes things like this possible.
From the Source-
This file is part of the article series by Jacob Seidelin about
creating a ray casting engine with JavaScript, DOM and Canvas.
If you have questions or comments, please contact the author at
either jseidelin@nihilogic.dk or http://blog.nihilogic.dk/
The code samples here are freely available under the MIT license.
See: [http://www.nihilogic.dk/licenses/mit-license.txt]
The graphics for sprites and walls are property of id Software.
This technique has been around since prior to 2008 at least, the biog entry below introduced the code[1], along with providing a tool to compress your js into an image using ruby [2].
The technique has a legitimate use as a suave compression method and was termed "super packing" in 2011 [3]
[1]http://blog.nihilogic.dk/2008/08/imageinfo-reading-image-metadata-with.html
[2]http://www.nihilogic.dk/labs/canvascompress/
[3]http://daeken.com/superpacking-js-demos
Also: setting up a webserver with over 1TB of storage is probably simpler, faster and more reliable.
I also think in this case the hack is a little useless. But I've seen examples where they use it to transfer a lot of 3D data for use in WebGL. And the author of this script is also linking to a nice usecase where is is used for game data:
http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html
Of course not! But if there's no use case then this is getting an awful lot of buzz for no real reason other than Ajaxian running a story on it, considering that it's not that new. http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html
It's been on reddit or hacker news before, this year iirc.
Well, in this case the information is a JPEG file, so it should look good as a PNG image ;)
But more to the point, there's a guy who stored JS code in PNG images[1], and any binary string could be used instead.
[1]: http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html
If you're interested in HTML canvas, and want to get started quickly, you should look into processing.js: http://processingjs.org/
Otherwise, this "cheat sheet" helped me the most: http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html