Using the Canvas tag in HTML5

Using simple ID tags, you can use the canvas tag to create a box on the screen. This box is a drawable region where you can create graphs, games, animations and much more. So let's take a look at how you can implement a canvas tag into your webpage (to check the results, make sure your browser is HTML5 compatible.)

[canvas id="demo" height="200" width="400">The text here will be displayed if the browser looking at this code does not support HTML5[/canvas]

(The use of brackets was to stop blogger using the code)

We can then use JavaScript to draw on the canvas. i.e.

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);

If you can't see from that code. This short piece of JavaScript draws a red box on the canvas. Simple use of the canvas tag can create really powerful imagery and interactive designs. Check out more about HTML5 Coding.