Published date: May 31, 2008
The Canvas Photo Experiment [Demo | source code] is a UI implementation similar to the UI of the "photo table" of Microsoft Surface.
Since in our case the media is the browser it has the following features:
The canvas implementation idea comes due to the limitations found in our previous implementation in SVG showed in the last part of this page
The most important reason though I finally chose canvas is the native browser support and compatibility. As the following table shows:
|ie6+||Yes (+ excanvas.js)|
Implementing this in canvas presents two main challenges: drag & drop and performance. I tried several approaches to solving these problems, and ended up using a multilayer solution which renders only the active image on the top-most canvas layer. This allows us to have drag & drop without needing to redraw every image each time one of them is dragged.
You can also preview the source code
To see it in action, check out the the Demo
There have been previous approaches both in SVG and Silverlight
Although the SVG solution had some drawbacks it was the first one I was playing before I decided to write the Canvas one from the scratch. The experiments on the SVG version extended the demo from the Mozilla one adding some functionalities to make it look somewhat closer to the Microsoft surface interface. Thus, I added grouping and animation features for that.
Update: Check the Flickr and Picasa integration from Michael Johnston and Pamela Fox respectively.
Go Back To Main Page