So that I could test some of the new HTML5 features I put together a new clock design, called the world clock.
HTML 5 is an upcoming standard for the internet, and it has some rather nice features such as the canvas tag. The new standard is currently only in draft but has already been implemented on many browsers such as Opera and Firefox.
The canvas is a way to paint directly onto a section of a webpage via commands that can create rectangles or lines and other things. This is controlled via Javascipt with functions such as fillRect(0, 0, 100, 100); The first thing to do, once you’ve added the canvas tag, is to grab the canvas context, then you can paint what you like. For instance:
<canvas id="canvas" width="200" height="200"></canvas><script type="text/javascript">var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');context.fillRect( 50, 50, 100, 100 );</script>
To test some of the canvas features I put together a little earth clock experiment. This is a clock based on the rotation of the Earth as it orbits the Sun. It involves various transformations of rotation together with image and line drawings.
You can see a demo of the “Earth Clock” here with additional explanations. Take a look at the source.
I did most of the development using Opera which behaved very nicely. As with other browsers not all canvas functions have been implemented (here is Opera’s supported) . Here’s a few of the problems I found:
- The biggest problem to overcome is the lack of text support. I had to create a group of images with text on which I then painted on to the canvas. This is no way perfect.
- There was also no ellipse or circle shape which I wanted but had to avoid using.
- There is no built in animation code for the canvas so you need to resort back to using javascript’s setTimeout and setInterval; they are a bit clunky but just about get the job done.
- Another problem is image pre loading. Any image you use to paint on to the canvas need to be preloaded – they must exist on the local computer before any type of usage it attempted or your canvas code will fail.
Overall the canvas looks like it going to be useful in many different areas, from game development to advanced interface design. I’ve already seen a few nice pieces, see this starfield and this paint tool.
Here’s some websites that helped learn some of the canvas tricks:
