As part of my ongoing investigations into HTML5 I decided to try my hand at adding some text together with an image to an HTML5 canvas element. I wanted to create a simple navigational interface as shown in the image to the left. As you can see I set the image to overlap the text and set transparent edges on the outside of the image.
I’m not sure how useful this really is, but I can see cases where it could certainly come in handy. In general HTML5 seems like quite a powerful mark-up language when compared with HTML 4.01
At this point I’m not worrying about adding transitional effects to handle mouse click events. I just want to get a feel for working with text and pictures in HTML5.
The commands I used were fillText to render the text to the Canvas and drawImage to add the image.