Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Image-editing site in HTML5?

Can any of the pro web-developers give some advice on what Learning Adventure(s) I should take to (eventually) create my own version of olioboard.com

To save you from creating an account and logging in, the main features are:

  • a "canvas" on which you can drag & drop images of furniture & backgounds to create a collage.
  • re-sizing images
  • layering images, to bring images to fore-and sending them to background
  • rotate & flip images
  • change scale of images
  • undo/re-do image editing steps Screenshot The original site uses Flash, but I wondered: can't this be done in HTML5 using CSS & the Canvas feature?

PS: I'm not asking about the social-media aspects of the website, such as friend-ing, newsfeed/updates, sharing. I expect that would be Jason's Ruby Adventure. No?

UPDATE: I found Fabric.js, which does everything I need it to, judging from the demo. But how to a) install it, and b) hooking it up to a web-page is beyond me...

1 Answer

James Barnett
James Barnett
39,199 Points

I'd check out the JavaScript Foundations and Build an Interactive Website courses to learn more about JavaScript.