Canvas Photo Experiment

Published date: May 31, 2008

Inspiration

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

Implementation

The most important reason though I finally chose canvas is the native browser support and compatibility. As the following table shows:

Canvas compatibility table for the Canvas Photo Experiment:

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

Previous attempt with SVG

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.

SVG compatibility table:

1. needs a plugin (ie. Adobe SVG)

2. no support (plugin?)

3. weird behavior when doing image translation

4. performance issues when moving more than one picture at the same time

Note: this video also includes the experimental prototype with the video tag tested in Firefox (Minefield build)

Misc

Update: Check the Flickr and Picasa integration from Michael Johnston and Pamela Fox respectively.

Flickr integration:

Picasa integration:

Go Back To Main Page