The HTML5 canvas and SVG tags - what are they?

  Read comments...

 

Introduction

<CANVAS> and <SVG>are new HTML tags which are part of the HTML5 standard. Canvas allows bitmap drawing which is controlled using JavaScript (ie you draw on the <canvas> using JavaScript), and is what the canvas based 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. SVG on the other hand has a DOM just like the HTML document and each element (lines, circles rectangles etc) can be referenced directly like HTML elements can in your document.

The <canvas> tag 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.

SVG uses a drawing methodology that is similar to your HTML page - where each element is an object that can be referenced. When you update the properties of these objects the scene is updated automatically for you.

Other uses for <canvas> include providing a control panel to your users and using it to create games. You should note though that when it comes to accessibility then a more traditional HTML based interface that uses <canvas> for certain elements and SVG for others may be preferable.

 

History of the canvas tag

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 modern versions of MSIE (starting from version 9).

 

History of the SVG tag

The SVG tag is is a bit like canvas but instead of being a bitmap drawing surface it's vector based and has a structure more like a HTML document. There's an example of SVG below. The output in this case is more or less the same as the canvas version but the difference comes in how the two are created. The source that creates the graphics is shown below.

SVG is XML based, an open standard and has been in development by the W3C since 1999. All modern browsers have some degree of support for SVG. It's currently at version 1.1 with version 2 on its way which will use CSS integration more.

 

A usage example of the canvas tag

[No canvas support]

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 and there is a wide range of drawing functions available to draw

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="600" height="250" style="border: 1px solid gray">[No canvas support]<canvas>

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.

<script>
    // First get a reference to the canvas tag
    var canvas  = document.getElementById("cvs"),
    
    // Now get a reference to the 2D drawing context (there is a 3D WebGL context
    // available - but its much more involved)
        context = canvas.getContext('2d');
    
    
    // Set the fill color to red and draw the square
    context.fillStyle = 'red';
    context.fillRect(50,50,100,100);
    
    // Set the color to blue and draw a circle
    context.beginPath();
    context.fillStyle = 'blue';
    context.arc(250,150,50, 2 * Math.PI, false);
    context.fill();
</script>

Here the onload event draws two simple primitives - a square and a circle. Since the arc() function (used to draw a circle) is a "path" function a path is started using the beginPath() function, the circle is drawn and then the fill() function actually puts the arc on the canvas. There's a corresponding stroke() function if you also want to draw the outline.

 

A usage example of the SVG tag

This is an example of SVG. The code that creates it is much smaller than the canvas version above and again, as you can see, it draws a rectangle and circle. Though not strictly necessary with SVG, you can use JavaScript to draw just like with the canvas tag, adding elements to the SVG tag in a similar way to how you add HTML elements to the document.

Here, two primitives are drawn (the circle and the rectangle), though you can generate other shapes by using the built in <path> element.

<svg width="350" height="250" style="float: right; border: 1px dashed gray">
    <rect x="50" y="50" width="100" height="100" fill="red"></rect>
    <circle cx="250" cy="200" r="50" fill="blue"></circle>
</svg>

 

Javascript charts

What makes the canvas and SVG tags good for producing 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. There's more information about charts made with JavaScript here and abundant examples across the whole RGraph website of charts interacting with JavaScript.

 

Canvas compared to SVG

HTML5 canvas can be compared in some ways to SVG - which is an more established XML and 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 coordinates of the square are changed (eg in an animation), then the whole canvas needs to be cleared and redrawn for each frame of that animation. In SVG on the other hand you just need to update the properties of the object (eg the width/height/color) and the scene is redrawn automatically for you.

As a result of not having to maintain a DOM though, canvas is fast to draw on and display to the browser and as a result it can give your page an air of speed.

Conversely SVG can be easier to use as it's more similar to the HTML which you may be used to, you may not have to write as much code and, if it's important to you, the native text can be accessed and read by screen readers.

 

Browser support

Modern browsers that support HTML5 also support canvas and SVG, including MSIE9+ (with MSIE9 you may need to use the HTML5 doctype, but not from MSIE10). You can read more about the canvas tag here and about the SVG tag here

 

Using DOM text instead of canvas text

The canvas tag, despite being very versatile, does not render text very well. As far as the quality is concerned it gets worse at higher zoom levels. It's also not "real" text - so you can't select it or copy it to your clipboard and paste it elsewhere.

So for this reason RGraph now has an textAccessible option. What this does is wrap the canvas in a div tag and use a combination of relative and absolute positioning to position span tags over the canvas that contain the relevant text. Its not perfect for every situation and there's a list (that's not comprehensive) of caveats on that page.

It does make text look much better though, and as less is being rendered on to the canvas it can make a noticable improvement in performance - particularly in canvas based effects and animations.

Share RGraph
X

Comments