An introduction to the new tags in HTML 5
THE LATEST BROWSERS ARE ALREADY IMPLEMENTING SOME OF THE UPCOMING HTML 5 SPECIFICATIONS, SO IT’S A GOOD TIME TO START EXPERIMENTING WITH WHAT THE NEXT WEB WILL BRING
gets finalised, what’s in your browser is likely to change. The skills you’ll pick up now, however, will be ready for the final HTML 5, whenever it arrives.
Author: Simon Bisson | Originally appeared in Issue 149
01 Drawing with <canvas>
<title>HTML 5 demo</title>
var canvas = document.getElementById(‘testCanvas’);
var ctx = canvas.getContext(‘2d’);
<body onload = “drawCanvas();”>
<canvas id = “testCanvas” width =
“300” height = “300”>Your browser does not support the
02 Drawing a square
which we can combine to make more complex objects.
03 Adding a circle
Drawing circles is harder than squares or rectangles. Here, we have to use an arc function to draw and fill a circle. One problem is that HTML 5’s drawing API expects angles to be expressed in radians, so we’ll need to convert our 360
var x = 120
var y = 120;
var radius = 50;
var startAngle = 0;
var endAngle = (Math.PI / 180)* 360;
var anticlockwise = true
ctx.arc(x,y,radius, startAngle, endAngle, anticlockwise);
04 Blending colours
HTML 5’s drawing APIs let you use an alpha blend to mix colours. You can do this by choosing an appropriate fill style. Here, we’re using an RGB colour mix, and all we need to do to specify alpha blending is to specify ‘rgba’ instead of ‘rgb’. The transparency level is a number between zero and one.
ctx.fillStyle = “rgba(0, 0, 200, 0.5)”;
05 Paths to pictures
The secret to drawing shapes in HTML 5 is using paths. We’ve already used a startPath function to draw our circle, and we can change the shape we’re drawing by using 270 degrees. Add a closePath function after you draw your arc (and switch to draw clockwise) to get this image.
06 Stroke versus Fill
Paths can be treated as strokes – for line drawing – or fills. Strokes are simple lines that follow the path described by a set of drawing instructions. You can move between points without drawing a line using a moveTo() function, allowing
complex shapes to be drawn with one single stroke() function. This code adds two concentric triangles to our drawing in just one action.
07 Colouring strokes
We’ve already used fillStyle to set colours and apply alpha blending to the shapes in our canvas drawing. We can do similar things with our line drawings, using strokeStyle to set colours for the canvas stroke-drawing operation. Set strokeStyle to rgb(0, 300, 0) to draw your triangles in green.
We’ve already used a local transparency value, but you can do a lot more with colours using the HTML 5 canvas API. One option is to use a colour gradient, where you can set the shape and direction of a gradient, either using a linear
or radial gradient. The result can be a very simple drawing but have a very effective effect – perhaps a stylised sunset or a forest fading off into the horizon.
var radialgradient = ctx.
09 Go further with <canvas>
10 Web Forms 2.0
HTML 4’s forms are a familiar, if limited, way of getting info from a web browser to a server. HTML 5 builds on the old forms standard to deliver a more flexible way of working. Opera is the first browser to implement Web Forms 2.0, taking advantage of features like validity checking.
11 Validity checking
<label>Home page: <input type=”url”
oninvalid=”alert(‘You must enter a valid web page
address.’); return false;”>
12 Minimum and maximum
Web Forms 2.0’s validity-checking features aren’t just for checking whether your users have typed in an email address when asked for one. You can also use them to handle minimum and maximum values for a field, which can even be a date range. Opera will render this code as a field with up and down arrows that can be used to select a time inside the range specified.
<label>Select a time during business hours:<input type=”time” min=”09:00” max=”17:30”></label>
One-minute intervals are a bit on the short side for a
booking system, so we’ll need to modify the default. Web
Forms 2.0 includes a step operator, which we can use to
control how Opera’s up/down control works. While the
Opera controls use a one-minute default, the minimum
step for a time input is one second. Set step to 1,800
seconds to allow users to pick appointments with 30-
<label>Select a time during business hours:<input
type=”time” min=”09:00” max=”17:30” step=1800>
14 Complete with datalists
Modern browsers (and the Google toolbar) often store commonly used form responses. With Web Forms 2.0, sites can keep their own lists of responses, using datalists associated with form inputs. This code snippet will hold
a list of site URLs that can be used as a quick-pick list for a URL input field, or your user can type in a URL that isn’t on the list.
<input type=”url” name=”location” list=”urls”>
<option label=”Site 1” value=”http://www.site1.org/”>
<option label=”Site 2” value=”http://www.site2.org/”>
<option label=”Site 3” value=”http://www.site3.org/”>
<option label=”Site 4” value=”http://www.site4.org/”>
<option label=”Site 5” value=”http://www.site5.org/”>
<option label=”Site 6” value=”http://www.site6.org/”>
<option label=”Site 7” value=”http://www.site7.org/”>