Monday, June 23rd, 2008
Photo Collages with Canvas
Category: Canvas
Ernest Delgado is having fun experimenting with canvas. He has posted on one of his tests which involved creating a photo-table-like system.
You can visit the demo that allows you to work with some photos and export them out. You can play with adding borders, show corners for rotation, all on the fly.
It is a rich example, and Ernest explained how he did it:
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 check out the source code for yourself.
Ernest has some other fun things that he is playing with, which I hope to feature soon.
Well executed layering. I noticed the Flickr integration screenshot - is there a demo available for that?
@Jigs: yeah, I updated the post with links to the demos of Michael Johnston and Pamela Fox who took the library and integrated it with Flickr and Picasa respectively.
The demonstration of what ‘can be done’ in browser-native style is awesome. (amazing it works in ie6, with the ‘excanvas.js’, which is apparently a Google contribution to the community)
Where is the best place to learn about Canvas? The books on Canvas are very few and far between. Found these:
http://developer.apple.com/documentation/AppleApplications/Reference/SafariJSRef/Classes/Canvas.html#//apple_ref/doc/uid/-CJBCECGI.html#//apple_ref/doc/uid/
http://developer.mozilla.org/en/docs/Canvas_tutorial
Any help is appreciated.
I saw this on the stupid cloverfield movie’s website… and it was done in flash and it was really really awesome… I’m going to keep my eye on this one…
Of course this is sooooo slow, it’s entirely unusable.
>>Of course this is sooooo slow, it’s entirely unusable.
What browser are you using?
Tried it out on Firefox and IE, both worked pretty solid (I was even happy with IE performance :-O)
FYI I wrote a cross-browser compatible way of doing Polaroid style images within the browser (Rotation, drop shadow, border and caption) using the Djoo gfx library:
http://blog.morrisjohns.com/cross_browser_polaroid.html
(The page is broken in IE6 even though the gfx code works fine in IE6… I used a now outdated version of the cross-domain loading for Dojo, which is barfing on IE6)