Monday, August 13, 2012

Javascript Canvas Hack

Last weekend I went to a hackathon in downtown Tucson. Together, with my team, we set out to make a social networking app based around creating and decorating a tile how ever you wanted.

The magic of the idea was that we would have a relevance algorithm that would arrange similar people's tiles together based on what was in the tile.

My job was to create the user interface that would allow users to simply add little stickies to their tile. Below I present the crude result of my 24 hours of effort.


What I made was a Canvas and Javascript hack to basically emulate a windowed graphical user interface. Users can add windows, move them, resize them, add text and delete them. I did this with little understanding of Javascript and no prior experience with canvas. 

You can download my hack. When you download it un-compress the file, inside there will be three files, a .js file, .css file and a .html file. To test it out: open index.html in a web browser.