The HTML canvas Element

The HTML canvas Element Basics – part 1

Forward: In this basic series, I talk only about drawings, which form the largest part of the canvas works. In this part, you learn the very basics of the html canvas element.

By: Chrysanthus Date Published: 1 Aug 2012

Introduction

The canvas element is one of the innovations in HTML. It is a new HTML element, which is principally used for drawing by the DOM (ECMAScript). If you have been watching financial news from the CNN or BBC TV station (or similar station), you would have noticed that the journalist displays certain information using graphs and charts (e.g. pie chart). HTML4 (and below) never had an element to represent such graphs and charts. HTML5 has an element for this called, the canvas element. That canvas element can also be used for games that are as a result of drawings. In general, the canvas element is used for drawing by the DOM. So the canvas element is used for HTML graphics.

Hey, you can also use a combination of drawings and images in the canvas element. I will address that in an advanced series. In this basic series, I talk only about drawings, which form the largest part of the canvas works.

DOM, through ECMAScript is what produces the graphics. So when a web page is displayed, you would see a drawing. Depending on the author of the graphics, you can click something and DOM will produce a new drawing in the canvas. Maybe in future the canvas element will allow the user to draw and then send the result as a form element to an email box. For now, that is not possible. For now, drawing is through code (DOM) by the author of the web site, and it is for displaying information to the user or for animation to the user.

This is a series and this is the first part. In this part, you learn the very basics of the html canvas element.

Note: If you think anything is missing in this article (missing text, broken links, image absent), just contact me at forchatrans@yahoo.com.

Prerequisite
This series is part of an online website design program. The name of this series is, The HTML canvas Element Basics. You must have good knowledge of Web Design before beginning this series.

The HTML canvas Element
The canvas element is a double tag element. Consider:

    <canvas id="C1" width="400" height="300">
        Your browser does not support the canvas element! So you cannot see the chart. Please upgrade your browser.
    </canvas>

Above, you have a basic canvas element. You can see the start and end tags. The start tag has three important attributes, which should always be there. You have the ID attribute. This is needed by the DOM in order to draw on the canvas element. You have the width and height attributes with values in pixels. If the user’s browser supports the canvas element, then a rectangle whose dimensions are those of the width and height values will appear on the web page at the position where the tags of the canvas element have been typed. The rectangle may be empty. In the above case the rectangle is empty. If the user’s browser does not support the canvas element, then the text in between the tags of the canvas element will appear in the web page at the position where the tags of the canvas element have been typed.

You can float the canvas element to the right or left of its containing element. Read and try the following code:

<!DOCTYPE HTML>
<html>
<head>
        <title>Illustration</title>
</head>
    <body id="B1">
    <canvas id="C1" width="600" height="450" style="float:right;border:2px solid red">
        Your browser does not support the canvas element! So you cannot see the chart. Please upgrade your browser.
    </canvas>
        <p>text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1</p>
        <p>text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2</p>
        <p>text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3</p>
     </body>
</html>

DOM Basics with the Canvas
In this section I will give you the basics of DOM, so far as the canvas element is concerned. You will first of all try an example. I will then use the example to explain the basic DOM features used with the canvas. Try the following code (click the button when the page is displayed):

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
        <script type="text/ECMAScript">
            function drawSquare()
            {
                cv = document.getElementById('C1');
                if (cv.getContext)
                    {
                        cntxt = cv.getContext('2d');
                        cntxt.fillStyle = "gold";
                        cntxt.fillRect(20,20,200,150);
                    }
            }

</script>
</head>
<body>
    <canvas id="C1" width="600" height="450" style="float:right;border:2px solid red">
        Your browser does not support the canvas element! So you cannot see the chart. Please upgrade your browser.
    </canvas>
    <button type="button" onclick="drawSquare()">Click</button>
</body>
</html>

Accessing the canvas by DOM
DOM uses the following expression to access the canvas element:

    document.getElementById(ID)

The ID should be in quotes. This expression returns the DOM object that represents the canvas. You can call this code object, the canvas object. So you can have something like,

                cv = document.getElementById('C1');

where ‘C1’ is the ID of the canvas element and cv is the name (variable) you have chosen for the canvas object (reference).

Does the Browser Support the canvas Element
Before you, the web page designer, use DOM to draw, you have to first check if the user’s browser supports the canvas element. For this, you use the expression,

    canvas.getContext

You type the name of the canvas object (e.g. cv), then a dot and then the getContext method of the canvas object. This method without arguments returns the equivalent of Boolean true or false. So you can use this in an if-condition. If it is true, the block of the if-construct that has the statements to draw, will be executed. If it is false, then the statements in the block will not be executed. You can optionally have an else block, which will alert that the browser does not support the canvas element.

The Context
You have what is called the two-dimensional (2d) context and the three-dimensional (3d) context. So far as DOM is concerned, the 2D context is a code object that can be used to make a 2d drawing. The following expression returns the reference of the 2d context:

                        context = canvas.getContext('2d');

Here, context, is the reference (object). Note that here, you have the getContext method with an argument. The 3d context is not yet developed.

The filling Color
You need to decide on the color that will fill the 2d shape. You can use the fillStyle property of the canvas object for this.

The Drawing
For simplicity, the word, drawing, here means a simple shape. After deciding on the color that will fill the shape, you have to decide on the shape. Let us chose a rectangle. The context object has a method for drawing rectangles, which is:

    fillRect(x, y, w, h)

Here, x and y are the left-top corner of the rectangle within the canvas area; w is the width of the rectangle and h is the height. The arguments are in pixels. Remember, y is positive downward, so h is measured downward.

Now, read the above code and try it again (click the button)

Time to take a break. Let us stop here and continue in the next part on how to draw lines.

Chrys

Broad Network

Related Articles

The HTML canvas Element

The HTML canvas Element Basics – part 1

Introduction

Related Links

Comments