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