Introduction to the HTML canvas Element
HTML Canvas 2D Context – Part 1
Foreword: In this part of the series, you learn the very basics of the html canvas element.
By: Chrysanthus Date Published: 16 Apr 2016
Introduction
Pre - Knowledge
At the bottom of this page, you will find links to the different series you should have read before coming here, to better understand this one.
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>
Here, 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>
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>
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 (reference) 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
There exists 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 (software) object that can be used to make 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.
You need to decide on the color that will fill the 2d shape. You can use the fillStyle property of the context 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 distances from 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).
Before we leave this part of the series, know that x is measured from the left edge of the canvas element rightward, while y is measured from the top edge of the canvas element downward.
Time to take a break. Let us stop here and continue in the next part of the series.
Chrys
Related Links
DOM Basics for HTMLDOM Event Basics for HTML
HTML Text and Other Elements in DOM
HTML Grouping and Sectioning Content Elements in DOM
DOM and HTML Embedded Content
HTML Canvas 2D Context
More Related Links
PurePerl MySQL API
Major in Website Design
Web Development Course
Producing a Pure Perl Library
NEXT