Monday, June 23rd, 2008

Photo Collages with Canvas

Category: Canvas

<>p>Canvas with Flickr

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.

Related Content:

Posted by Dion Almaer at 7:49 am
9 Comments

++++-
4.3 rating from 38 votes

9 Comments »

Comments feed TrackBack URI

Well executed layering. I noticed the Flickr integration screenshot – is there a demo available for that?

Comment by Jigs — June 23, 2008

@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.

Comment by ernestdelgado — June 23, 2008

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.

Comment by holts — June 23, 2008

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…

Comment by abcohen — June 23, 2008

Of course this is sooooo slow, it’s entirely unusable.

Comment by pyalot — June 24, 2008

>>Of course this is sooooo slow, it’s entirely unusable.

What browser are you using?

Comment by Nosredna — June 24, 2008

Tried it out on Firefox and IE, both worked pretty solid (I was even happy with IE performance :-O)

Comment by matanlurey — June 26, 2008

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)

Comment by morrisj — June 27, 2008

Tried this as well…in Safari…it keeps crashing?!?

Comment by photocanvas — August 28, 2009

Leave a comment

You must be logged in to post a comment.