Share:
HTML5 canvas is a new HTML tag (<canvas>) which is part of the forthcoming HTML5 standard. It allows bitmap drawing which is controlled using Javascript (ie you draw on the <canvas> using Javascript), and is what the RGraph libraries use to draw the charts. You could liken it to a piece of paper which is part of your page, on to which you can draw. Because you use Javascript to draw on the canvas it becomes part of your page and allows interaction very easily.
Canvas uses a "fire and forget" drawing methodology - there is no DOM that is maintained, so if you want to alter something you'll probably (but not necessarily) have to redraw the entire canvas. The lack of a DOM means that canvas is fast to draw on and very responsive - important when you're providing interactive or animated charts to your users.
HTML5 canvas was originally introduced by Apple in 2004 for use in Mac OS X WebKit to power dashboard applications and their Safari web browser. Since then it has been adopted by Mozilla and Opera and now the W3C has adopted it in the upcoming HTML5 specification. It's now supported by all modern web browsers including IE9 and IE10. In the case of IE7 and IE8 there is the ExCanvas library which adds support and is simply a matter of including an extra Javascript library in your page. This library (excanvas.js) is included in the RGraph download.
The example to the right is a very simple example of drawing a few primitives on the canvas. The dotted border is provided by CSS to illustrate the drawing area. You use Javascript to draw on the canvas using and there is a wide range of drawing functions available.
The <canvas> tag itself is defined with just width, height and id attributes. The one here also has a style attribute to add the border. The HTML used is shown below:
<canvas id="cvs" width="375" height="250">
This text is shown if the users browser does not support canvas.
<canvas>
<script>
window.onload = function ()
{
var canvas = document.getElementById("cvs");
var context = canvas.getContext('2d');
// Draw the red triangle
context.beginPath();
context.strokeStyle = 'black';
context.fillStyle = 'red';
context.moveTo(AA(null, 100), AA(null, 25));
context.lineTo(AA(null, 150), AA(null, 100));
context.lineTo(AA(null, 50), AA(null, 100));
context.lineTo(AA(null, 100), AA(null, 25));
context.stroke();
context.fill();
// Draw the blue square
context.beginPath();
context.fillStyle = 'rgba(0,0,255,0.5)';
context.strokeRect(AA(null, 100), AA(null, 75), 100,100);
context.fillRect(AA(null, 100), AA(null, 75), 100,100);
context.stroke();
context.fill();
// Draw the yellow circle
context.beginPath();
context.globalAlpha = 0.5;
context.fillStyle = 'yellow';
context.arc(200,175,50,0,2 * Math.PI, 0);
context.stroke();
context.fill();
}
</script>
The content in between the tags is not shown if the browser supports canvas, and is if the browser doesn't. This provides
for fallback content if the users browser doesn't support canvas.
What makes HTML5 canvas so good for charts is the ability to interact seamlessly with both the user and the rest of the page. The charts that RGraph produces are all made from Javascript so output from other Javascript code can be used with ease. Or another option would be to output server-side data as a Javascript array and use that. Yet another option is to use AJAX to get new data. Doing this would allow you to get the new data in real-time and create something like this example (this particular example just uses random data but you could easily replace that with your own real data retrieved via AJAX).
HTML5 canvas can be compared in some ways to SVG - which is an older vector based alternative for drawing in HTML pages. SVG is at a more abstract level than canvas and maintains a record of everything drawn, using a DOM. This is then converted to a bitmap when shown. In the above example, if the blue squares coordinates are changed (eg in an animation), then the whole canvas needs to be cleared and redrawn for each frame of that animation.
As a result of not having to maintain a DOM though, <canvas> is fast to draw on and display to the browser.
Modern browsers that support HTML5 also support canvas, including IE9+. Earlier versions of MSIE have some support through compatibility layers provided by Google and Mozilla. One such library - ExCanvas - is provided in the RGraph archive allowing IE7 and 8 to display the graphs, albeit without the dynamic features. You can read more on this here and there is a table of browsers that support HTML5 canvas here.
By default lines are anti-aliased - and this can make them appear thicker than what they should be. This can avoided by offsetting your coordinates to the nearest half-pixel - and this is what the AA() function does.You can read more on this and see an example here.
© Copyright RGraph licensing 2008-2012 All rights reserved. About, Privacy policy, Terms and conditions