A Look At HTML5 and its Canvas Tag


Since HTML5 has been in development, there has been a lot of speculation that the introduction of <canvas> mixed with JavaScript means flash will have no place on the internet. I've taken some time to have a look at what developers have created using a combination of the JavaScript and <canvas>, and it is starting to look rather impressive.

For those of you who do not know what the HTML5 canvas tag is, it is a tag that was recently created for HTML5 that allows 2-dimensional drawing, or bitmap drawing if you prefer, using JavaScript. It allows both simple and complex shapes to be drawn that you could previously only get by using images. With the use of JavaScript, it allows interactivity between the elements and the user, just like flash would.

You should note that the canvas tag is a part of HTML5, and as such is only supported by Mozilla Firefox, Google Chrome and Apple Safari. Opera supports a small amount of HTML5, but it does not support the canvas text and shadow APIs. However Microsoft Internet Explorer does not yet support it (up to 8), and support is being given in IE9, therefore it is advisable not use HTML5 in mainstream use.



Harmony is a drawing tool that uses the whole page for the canvas. It has 11 different "brushes" you can use and you make some rather interesting shapes/images with the tool. It takes a while to get used to the tools and how they interact interact with each other, as when the lines cross over or come close they create different types of effects.



Canvas Paint

Canvas Paint is an experiment that dates from 2006. It is a near pixel-perfect copy of the old Microsoft Paint in HTML, CSS and JavaScript. Ok, so the user interface isn't exactly appealing, using an interface from Windows 98. But the tool itself is pretty impressive, allowing you to choose from most of the MS Paint features, change the colours, as well as being able to download the image or save it online.



Tile Track

Tile Track was created by Julian Rosenblum, no information is given on the game or instructions. Tile Track is a very addictive game where you use the cursor keys to guide the smiley face getting rid of all the green squares before you get to the final red square. Although the first two levels are very simple, the next ones may require a few turns to complete.




Cubeout is a remake of Blockout (a 3D Tetris game) in HTML5. It works in Firefox, Chrome, Opera and Safari though it is best when using Chrome and Opera. It has all the features you would expect in Tetris including being able to rotate the blocks (in a 3 dimensional way), move the blocks and to accelerate their fall. You can also step away from your high score game by pausing it.




EtchaPhysics is a cross-browser, gesture-enabled physics game for the HTML5 Canvas. It has Classic Etcha-Sketch functions like "Shake to Clear" and "Dial To Draw" coupled with a touch and gesture-enabled drawing interface create an addictive and fun environment. There are 15 addicting levels and 10 unique game-modes, and it is also iPod Touch / iPhone compatible.



Cool Clock

CoolClock is a customisable JavaScript analog clock that uses the Canvas tag. It works best in Firefox, Safari and Chrome. You are able to download CoolClock and create your own skins or see what other users have created.



Same Game

"Same Game" is an addictive game where you have to remove all the circles by clicking on them. You can only remove circles where there are two of the same colour next to each other. You also have options to change the number of colours and the grid size shown.




UFO is in its second version and is a rather fast paced game. You control a UFO and press space bar to fire at tanks, which in turn also fire towards you. It is a similar game to space invaders, but in reverse, you are in the air, and they are on the floor.



Super Mario Kart

This is a prototype of a JavaScript Mario Kart-like racing game. It uses the Canvas tag to do most of the rendering. The game is probably one of the smoothest on Canvas and JavaScript creations yet, unfortunately the races don�t end, you just drive around a choice of two tracks against two AI characters until you get a bit bored.




3bored is an addictive game where you have to avoid gun fire coming from tanks and planes (and as you progress, depth charges and orbital laser strikes.) It's rather hard to get used to it at first with a fast paced action, but after playing it a few times it becomes very addictive.




Ben Joffe experimented with using textures with Canvas. He has created what at first, looks like you're about to play Doom. Unfortunately you cannot shoot your gun, but is it very smooth even with a high resolution on the textures.



Liquid Particles

This is an experiment where you can interact with the mouse. Moving the mouse around will make the particles follow it, clicking will make them rush out and come back, whereas holding down the mouse button will make them stay away from your mouse.



Google Box

Addy has created a 3D Google gift box. You can use the mouse to rotate the box. Typing in your search query and clicking Search will open the box up to reveal your search results.




A kaleidoscope effect created by JavaScript and the canvas tag. You can click on the page to add more to the kaleidoscope.



Canvas & Audio Experiment

An experiment where it uses both the canvas and the audio tag. The circles on the page move and flash in conjunction with the audio.




Although it looks like HTML5 and its canvas element will have a place on the internet when all browsers support it fully, I couldn't help but notice that half the time, they were rather choppy in its rendering and drawing. Though no doubt when the JavaScript frameworks (such as jQuery, mootools, prototype, etc.) start writing support, it will run a lot smoother.


I personally think Flash will stay alive, if only due to the fact that developers would have to learn one or two new languages (HTML5 and JavaScript) in order to recreate their Flash creations, and there is also no doubt that Flash is still a lot smoother than the canvas tag.


Futher Reading

Below are some links for further reading on the canvas tag, including information about it and tutorials on using the canvas tag.

Wikipedia: HTML5 Canvas
The Canvas Element
Mozillas Canvas Tutorial
Diving Into Canvas
Operas Cavans Painting

admrie says:
17 Sep 2010 at 10:33
html5 looks to be a brilliant
Anonymous says:
14 Aug 2010 at 10:33
duffman says:
28 Jul 2010 at 10:32
"Though no doubt when the JavaScript frameworks (such as jQuery, mootools, prototype, etc.) start writing support, it will run a lot smoother."

lol... uhh, no. They have nothing to do with the smoothness of the canvas rendering. Why would you think that?

They make javascript easier for an author to write and since canvas instructions are just javascript they would help with the authoring of canvas too obviously but js frameworks can't speed up the rendering. If anything they might slow things down since they're another layer your instructions have to go through before they actually reach the canvas to be rendered.
Melle says:
24 Jul 2010 at 10:31
I'm excited to start learning how to use the canvas tag as well, thanks for the list!

Though this is possible by using the canvas tag, you still need quite a lot of JavaScript before you "get" nice effects.

23 Jul 2010 at 10:30
HTML5 is robust...It will help designer to think differently..

Add New Comment

Add a new comment. All fields with an * are required.
Add comment