My Companies

Using HTML5 Canvas Element to create cool tagging interface

There have been several new additions to the world of web with the introduction of HTML5. I have been playing with canvas element for quite some time now and in my opinion, it is one of the best features introduced in HTML5. I am more interested in canvas element because I have been involved with image processing in the past and it allows us to play with images in a whole new dimension. In this tutorial, I would be explaining about the use of the canvas element to create a cool tagging interface. Tagging will allow users to add annotations to selected portions of the image so that when they hover the mouse over that particular portion of the image, the tag comes up. The tags can contain complete HTML text. That means that the user can also insert links, images etc. in the tags.

Using these mouse actions, the user can now assign tags to certain regions in the image.

Once the user is done with choosing all the tags that he wants, we can then change the mouse actions to show the annotations on the image on mouse over. This time we will have to handle mousemove event. No action would be performed on other two events.

This is it! I have broken the tutorial into steps. However, there are a few gaps which can be easily filled in. Following these steps, you can create wonderful tagging interfaces easily. Here's a image of how it looks like.