HTML5 - Canvas

HTML5 is the next generation of HTML standard that superseds previous standards like HTML 4.0, XHTML 1.0, and etc.

 

HTML5 is designed to be cross-platform. All you need is a web browser that supports HTML5. At the moment, not a single web browser supports all HTML5 features. In fact, HTML5 standard is not finalized yet. Some browsers support more and some support less. If you are going to develop a website using HTML5, make sure you understand that your clients may use different browsers, and your content may not be rendered correctly on their browsers.

 

What are the new features in HTML5?

HTML5 standard includes a broad set of new features like:

  • Geo-location
  • Drag-and-drop
  • Local data
  • Video and audio
  • Canvas
  • CSS3
  • Animation


Status of HTML5 standard

The HTML5 standard is still in draft and has not been finalized yet. For the latest published version, please follow this link http://www.w3.org/TR/html5/

 

 

HTML5 supported web browsers

At the time of writing, not a single web browser supports all HTML5 features yet. Generally speaking, modern web browsers, like Chrome, Firefox, Safari, support some features. However, you can test how well your browser does in supporting HTML5 using this online test - http://html5test.com/

 

 

HTML5 structure

A HTML5 page is not much different from a normal HTML page. The only requirement is to include the following DOCTYPE to inform the receiving web browser that this is HTML5 content.

<!DOCTYPE html>
<html> ...
</html>

 

 

Canvas

The most interesting feature of HTML5 is the canvas, which is supported by most modern web browsers. The best way to access a canvas is through JavaScript. Once a 2D drawing context is obtained, you can use the canvas API to draw any 2D objects.

Here is a very simple example

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function init() {
var canvas = document.getElementById("mycanvas");
if (canvas && canvas.getContext){
var context = canvas.getContext('2d');
context.fillStyle = "rgb(200,200,0)";
context.fillRect (10, 10, 250, 100);

context.fillStyle = "rgb(0,0,255)";
context.font = 'italic 40px sans-serif';
context.fillText('Hello world!', 30, 70);
}
}
</script>
</head>
<body onload="init()">
<canvas id="mycanvas" width="300" height="150">
Your browser does not support HTML5 canvas
</canvas>
</body>
</html>

 

If your web browser supports HTML5 canvas, you will see this image on your browser.


Canvas offers lots of functionality, and is difficult to be described all in here. Please check the latest specification or books.


Other applications that use Canvas

Canvas provides a new way - a more efficient way - to draw 2D graphics. This opens up a lot of opportunities for building applications. One of them is charting. I have found this good JavaScript charts plotting library, RGraph, that utilities the HTML5 canvas to create awesome charts. Other than normal line, bar & pie charts, you can create something like the following rose chart.