Canvas

Course- HTML5 >

The canvas element is one of the awesome features of HTML5. It enables us to draw graphics within the deined boundaries. Though canvas is an HTML element, it works in tandem with the JavaScript API. Let's look at how the canvas element is defined in HTML5 as follows:

<canvas id = "demo" width = "500" height = "150"> </canvas>

The id attribute is optional, but very useful as it is extensively used in HTML5.

The width and height attributes of the canvas element have to be defined to understand the boundaries of the canvas element. If the height and width attributes are not defined, then the default value is considered that is the width attribute would be 300 pixels and height would be 150 pixels by default. However, it is a good practice to define the height and width attributes in a canvas element.

We need to obtain a reference to the canvas element by using the following code snippet:

var canvas = document.getElementById('demo');

Once we obtain a reference, we need to obtain a reference to the 2d context in the canvas element; hence, we use the following code snippet in which we call the getContext('2d') on the deined canvas element:

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

We will start coding right away to understand the functionality of canvas instead of wandering through loads of theory. Let's look at the following code:

<!DOCTYPE HTML>
<html>
<head>
<script type = "application/javascript"> function drawRectangle() {
var canvas = document.getElementById('fstrd'); var context = canvas.getContext("2d"); context.fillStyle = "rgb(200,0,0)";
context.fillRect (90, 90, 190, 190); context.clearRect(130,130,110,110); context.strokeRect(150,150,70,70);
}
</script>
</head>
<body onload = "drawRectangle();">
<canvas id = "fstrd" width = "300" height = "300"></canvas>
</body>
</html>

The only primitive shape supported by the canvas element is the rectangle.

The output of the code is displayed in the following screenshot:

convas

The fillRect property is used to draw a rectangle filled with color. Here we have used fillStyle = "rgb(200,0,0)", which will fill the rectangle with red color.

The clearRect property will clear the deined rectangular space respective to the

dimensions mentioned for clearing.

The strokeRect property draws an outline in a rectangular shape.

As we can see, all these properties have four parameters mentioned. The parameters can be deined as (x, y, width, height). (x, y) are the coordinates along the x axis and y axis respectively. The origin of these coordinates is at the top-left corner of the web page at (0, 0).

I guess that was pretty simple. Now, let's look at the procedure to create different shapes other than the rectangular primitive shape. We have to use the concept of path to understand the functionality.

beginPath

We start the path using the beginPath() method. If we call this method, the list of items that form a shape is reset, and as a result of that we can draw new shapes.

closePath

Using the closePath() method, we can close the shape. For example, if the pointer is at a point distant from the starting point, this method will close the shape by drawing a straight line to the start point. If the shape is closed already, then this method will not do anything as the purpose has already been served.

moveTo

We know that the x axis and y axis coordinates originate at the top-left corner of the canvas at (0,0) by default. If we want the coordinates to start from a different point on the screen, we will move the virtual pointer to that speciic path using the moveTo() method. This method will take two coordinates (x, y), which will deine the new starting point on the screen.

stroke and ill

The stroke function is used to draw the outline of any shape, whereas the ill function is used to ill color into a shape. If we are using the fill() method, we do not have to use closePath(), as the shape will be completely illed using the ill function.

arc

The arc() method is used to draw an arc on the canvas, and there are ive parameters deined in the arc() method. Usually, an arc() method would be deined in the following format:

arc(x, y, radius, startAngle, endAngle, anticlockwise)

Let's look at the following parameters and understand what they mean:

The x and y parameters are the coordinates on the x axis and y axis
The radius parameter deines the radius of the arc
The startAngle and endAngle deine the angle in which the arc starts and

ends respectively

anticlockwise deines the direction of drawing the arc

lineTo

The lineTo() method will draw a line from the starting point of the virtual pointer to the parameters deined in the function. For example, suppose we have moveTo(10,20) and lineTo(50,70) deined in the code, a line will be drawn from (10,20) to (50,70).

Let's now look at the following code to understand the procedure to draw concentric circles:

<html>
<head>
<script type = "application/javascript"> function drawArc() {
var canvas = document.getElementById('fstrd'); var context = canvas.getContext('2d'); context.beginPath();
context.arc(75, 75, 50, 0, Math.PI*2, true);
context.moveTo(110, 75);
context.arc(75, 75, 35, 0, Math.PI*2, false); context.stroke();
context.fill();
}
</script>
</head>
<body onload = "drawArc();">
<canvas id = "fstrd" width = "300" height = "300"></canvas>
</body>
</html>

The output of the code will be as shown in the following screenshot:

convas arc

The Math function in the code is a part of the JavaScript library. We have not used the closePath function here, as we have used the fill function at the end of the JavaScript code.

PRV MENU NEXT