JavaScript Continued

HTML Canvas

The HTML canvas element is used to draw graphics on a web page. It is possible to create all manner graphics using canvas including graphics, interactive graphics and animations. The following sample are some examples of what is possible using the HTML canvas element.

HTML canvas elements is used to draw graphics programmatically, that is JavaScript is used to draw content on to the canvas. Using JavaScript events the canvas can be interactive. The canvas itself is a container for graphics. To display anything using a canvas JavaScript must be used. The set of instructions that can be used with a canvas are limited allowing the user to draw simple geometic shapes and text. It is even possible to create games using the HTML canvas element.

To create an HTML canvas element on a page it is the same as any other HTML element.

<canvas id="canvasID" width="200" height="100"></canvas>

The canvas element must have an id attribute so it can be referred to using JavaScript.The width and height attributes are necessary to define the size of the canvas. By default, the canvas element has no border and no content. To add a border CSS can be used. The following example adds a border the the canvas element.

<canvas id="canvasID" width="200" height="100"style="border:1px solid #000000;"></canvas>

To add content to a canvas element JavaScript must be used. To do this the canvas must be got using its id attribute and a graphics objects must be retrieved. The graphsics objects allows content to be drawn on the canvas.

The first line of JavaScript gets the HTML element with id equal to canvas and stored the returned object into a variable called canvas. The second line gets the graphic object from the canvas. this object is required to be able to add content to the canvas. The last two lines sets the fill color and draws a rectangle. The instruction to draw a rectangle takes 4 arguments, the x and y coordinate of the top left hand corner and the width and height of the rectangle. The coordinates on a HTML canvas are on a 2 dimensional grid. The coordinate 0,0 is the top left hand corner of the canvas. As the x value increases as it moves horizontally from left to right. The y value increases as it moves down the page.

Drawing lines

To draw a line is a little bit more laborious. First the pen must be moved to starting position of the line, then the moveTo instruction must be issued then finally the stroke instruction actually draws the line. The following example illustrates how to draw a line.

Drawing a cirle

To draw a cirle first the beginPath method must be invoked. Then the arc method is invoked. The arc method takes 5 arguments the first two are the x and y coordinates of the center of the circle, the third is the radius of the arc and the fourth and fifth are the start and finish angle of the arc that should be drawn. The angles are measured relative to a horizontal line (60 is at 1 o'clock on a clock face).

Drawing text

To draw text onto a canvas the font must be specified first. In the example below line 4 sets the font to 30px Arial. The fillText methods draws text onto the canvas. The method takes 3 arguments, the first is the text to be drawn on the canvas and the third and fourth are the x and y coordinates respectively.