Dynamic image collage with HTML5 and Canvas

There is an update to this post that adds text support to the collage: http://radikalfx.com/2011/12/12/text-addition-for-image-collage-with-html5-and-canvas/

In the last couple of months the hype around web technology has really started to heat up. The HTML5 standard is getting a lot of attention from all major browser manufacturers and all my favorite browsers are starting to support all the nice new features coming in HTML5.

One of my favorite new features is Canvas, prime reason being my hope to finally make Flash obsolete, sorry Adobe. Because I wanted to check out the capabilities of Canvas, I decided to start coding some simple projects with Canvas.

HTML5 Canvas Collage

My first demo is a simple Canvas element which can be used to make a collage of images. The demo can be found here., you will need a Canvas compatible browser.

What does it do
The demo lets you search for images from Flickr. When you have searched for some images, you can click any of the images there to add them to the Canvas part of the page. When the image is added to the Canvas then it’s automatically created as a new layer. Each layer can be manipulated in the following ways: move, scale, rotate, move layer up and down, remove layer, change opacity, change blending mode and enable or disable shadow.

The layout is a bit similar to image edit software, which I think is quite simple to understand. The code might still contain some bugs and do some unexpected things. Rotating images and then scaling makes the whole thing kinda whobly!

How does it work
The JavaScript code for this demo is split up into two parts. The first is a library that loads in all the proper calls for the Canvas element and that gives the page the ability to modify the layers in the collage. The second part of the JavaScript code, is the code to handle all the page interaction and to bind the HTML controls for the layers. I won’t go into the code for the user controls. But the canvas control might be interesting:

jCollage = new Collage("#collage"); //Create new collage Object with id of the Canvas tag
jCollage.setBackgroundColor("#fff"); //Set background color of collage
jCollage.setBackgroundImage(img); //Set background image for the collage
jCollage.redraw(); //Force redraw the collage
jCollage.addLayer(img); //Add a new layer to the collage
jCollage.getLayer(id); //Get layer by id
jCollage.getLayers(); //Get Array if all layers
jCollage.removeLayer(id); //Remove layer based on id
jCollage.moveLayerUp(id); //Move layer up in the array
jCollage.moveLayerDown(id); //Move layer down in the array
layer.isVisible(); //Is layer visible
layer.toggleVisible(); //Toggle visibility
layer.hasShadow(); //Does layer have shadow
layer.toggleShadow(); //Toggle shadow
layer.setShadow(boolean); //Set shadow
layer.getOpacity(); //Get opacity of layer
layer.setOpacity(float); //Set opacity of layer
layer.getCompositeOperation(); //Set the composite operation
layer.setCompositeOperation(string); //Get the composite operation

You can find the JavaScript code for this here. I might one day work this out as a jQuery plugin, but don’t know if that will be worth the extra effort.

Getting up to speed on the Canvas element is quite easy and the information for the HTML5 standard is already enough to get you going. Because a lot of people have already been working with this feature, it’s also very simple to find more detailed information about problems and how to solve them.

The most difficult thing to get going was handling the collision interaction with the Objects, because I couldn’t use the normal mouse events based on the DOM. I had to figure out the math behind the collisions myself, this code is not very pretty. But after getting this demo running, I have to say that it was not very difficult to code and Canvas is definitely going into a direction were it could replace Flash functionality. I just hope that Internet Explorer starts supporting it some time soon as well!