A Simple Canvas Example
An example of using the <canvas> tag can be found in the demo link below, by clicking on the Carp Puzzle button. The code can be found in scripts/canvas.js. The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> tag is only a container for graphics, you must use a script to actually draw the graphics.
An example tag:
<canvas id="tutorial" width="150" height="150"></canvas>
Again, this looks a lot like the <img> element, the only difference is that it does not have the src and alt attributes. The <canvas> element has only two attributes - width and height. These are both optional and can also be set using DOM properties. When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size.
The id attribute is not specific to the <canvas> element but is one of the default HTML attributes which can be applied to (almost) every HTML element (like class for instance).
The <canvas> element can be styled just like any normal image (margin, border, background, etc.). These rules however do not affect the actual drawing on the canvas. When no styling rules are applied to the canvas it will initially be fully transparent.
Because the <canvas> element is still relatively new and is not implemented in some browsers (such as Internet Explorer versions below IE9), we need a means of providing fallback content when a browser does not support the element.
On a basic level we can just provide alternative content inside the canvas element. Browsers which do not support <canvas> will ignore the container and render the fallback content inside it. Browsers which do support <canvas> will ignore the content inside the container, and just render the canvas normally.
For example, we could provide a text description of the canvas content or provide a static image of the dynamically rendered content. This can look something like this:
<canvas id="clock" width="150" height="150">
<img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>
The <canvas> tag creates a fixed size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. The Carp Puzzle uses the 2D rendering context. Other contexts may provide different types of rendering; for example, there is a 3D context ("experimental-webgl") based on OpenGL ES.
The <canvas> is initially blank, and to display something a script first needs to access the rendering context and draw on it. The canvas element has a DOM method called getContext(), used to obtain the rendering context and its drawing functions. The getContext() function takes one parameter, the type of context, for example:
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
In the first line we retrieve the canvas DOM node using the getElementById() method. We can then access the drawing context using the getContext() method. Modernizr, as usual, can be used for checking browser support.
Published on 15 March 2013 in HTML5 Features