Course notes 14
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

HTML5 Canvas

The <canvas> element is an environment for dynamically creating, and interacting with graphical elements inside HTML. Unlike technologies such as Flash, or Silverlight, it needs no plug-ins, and unlike VML or SVG, it has achieved widespread support. The canvas specification is a milestone in web technology. The capabilities and potential that it brings to the interactive web are incredible. And, all you need to use it is a little Javascript.

Here is an example of the code you need to add inside the body of your html file:

    <canvas  id="mycanvas" width='400px' height='300px'></canvas>

The actual canvas element is incredibly simple. The one line of code above is all there is to establishing a canvas within the html. As you may notice, there is nothing between the opening and closing tags. This is because the contents within the canvas tags have no relevance to any browser which understands the canvas element.

The moment the surface is initialized (and any time later that it is re-initialized), the contents are cleared. This means that you can place fallback content within the canvas for browsers which fail to recognize the drawing surface.

When first instantiated, the canvas will have no visible features; it only provides the designated surface onto which one prepares to draw. To carry out the actual drawing you use Javascript.

Place the Javascript in the head of your HTML file:

        function init() {
            var canvas = document.getElementById('mycanvas');
            var ctx = canvas.getContext('2d');
             // the actual drawing calls would go here
    <body onload="init()">
    	  <canvas  id="mycanvas" width='400px' height='300px'></canvas>

To begin working with a canvas element in Javascript, two things must first be done: target the element, and then define its context. The two lines above accomplish both these tasks, respectively.

The first line uses a standard getElementById to search the document for an element with the ID of 'mycanvas'. This is the canvas element previously defined. ThegetElementById assigns your canvas element to a variable named 'canvas'.

The second line establishes the canvas' context. The context can be thought of as the medium through which Javascript should apply any action taken towards the canvas.

When we get to drawing, it is the context we will actually be making the calls to, not the canvas. The context is how to get to the canvas. As of right now, there is only a '2D' context available, however a 3D context, 'webgl', is currently emerging which will allow for the browser to take full advantage of hardware-accelerated openGL rendering.

Once the context has been established we assign the reference to the variable 'ctx' (short for context) and we can begin drawing on the canvas!

Why is the Javascript in a function?

It is very important to recognize why the above Javascript lines have been placed inside a function instead of existing alone within the script tag.

The first line of the Javascript is making a call to the document to search for an ID of 'mycanvas', and it expects the HTML to be there when it goes searching. This means we need to make sure the Javascript does not execute until after the HTML has been loaded into the browser. Assuming we place the script tag within the head, if the code is not in a function it will not find the ID 'myCanvas' because the page is rendered from top to bottom.

There are several ways to solve this problem. The most common method is to encapsulate the code within a function and then call this function once the page has loaded. Traditionally, this would be accomplished by placing an onload="function()" parameter on the opening body tag. This onload event will not trigger until the page and its resources have finished loading.

CSS and the Canvas

CSS styles that apply to the canvas include:
position, float, borders, margin, etc.

CSS will not affect anything inside the canvas

CSS height and width will distort the image in the canvas if it is not the same as the height and width of the canvas.