Closed Shapes in HTML Canvas
The HTML canvas Element Basics – Part 4
Forward: In this part of the series, we see how to cause DOM to draw closed shapes in the html canvas element.
By: Chrysanthus Date Published: 1 Aug 2012
Introduction
Note: If you think anything is missing in this article (missing text, broken links, image absent), just contact me at forchatrans@yahoo.com.
The Rectangle
The rectangle can be drawn in two ways: as an independent shape and as a subpath.
Rectangle as an Independent Shape
To draw a rectangle as an independent shape, you use the following context properties and methods:
context.fillStyle [ = value ]
The fillStyle property sets (or gets) the color that will be used to fill the rectangle (inside).
context.fillRect(x, y, w, h)
Here, x and y are the left-top corner coordinates of the rectangle. w is the width of the rectangle and h is the height of the rectangle. The fillRect(x, y, w, h) displays a rectangle using the values of its arguments and the value (color) of the fillStyle property.
context.strokeStyle [ = value ]
The strokeStyle property sets (or gets) the color that will be used to draw an outline around the rectangle.
context.strokeRect(x, y, w, h)
The strokeRect(x, y, w, h) method displays an outline around the rectangle whose position and dimensions are given in its arguments (x, y, w, h), using the value (color) of the strokeStyle property. The width of the outline is determined by the browser.
context.clearRect(x, y, w, h)
This method clears all pixels on the canvas in the given rectangle to transparent black. It clears the inside of the rectangle leaving out the outline (if available).
Note: you do not need the context begin() method in order to draw an independent rectangle.
Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<canvas id="C1" width="400" height="300" style="float:right;border:2px solid red">
</canvas>
<script type="text/ECMAScript">
cv = document.getElementById('C1');
if (cv.getContext)
{
cntxt = cv.getContext('2d');
cntxt.fillStyle = "orange";
cntxt.fillRect(30,30,120,40);
cntxt.strokeStyle = "purple";
cntxt.strokeRect(30,30,120,40)
}
</script>
</body>
</html>
Note that the fillStyle property is typed before the fillRect() method and the strokeStyle property is typed before the strokeRect() method.
To draw a rectangle as a subpath, you use the following syntax:
context.rect(x, y, w, h)
This rectangle is actually a subpath and a closed line. So you use the line (and curve) properties and methods with it. So you have to use the begin() and stroke() methods, Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<canvas id="C1" width="400" height="300" style="float:right;border:2px solid red">
</canvas>
<script type="text/ECMAScript">
cv = document.getElementById('C1');
if (cv.getContext)
{
cntxt = cv.getContext('2d');
cntxt.beginPath();
cntxt.moveTo(20,20);
cntxt.lineWidth = 5;
cntxt.strokeStyle = "green";
cntxt.lineTo(40,80);
cntxt.rect(40,80,100,100);
cntxt.fillStyle = "yellow";
cntxt.fill();
cntxt.stroke();
}
</script>
</body>
</html>
The rectangle begins at the end of the previous subpath. Note: the word stroke is used for lines (curves) and outlines.
The Square
The square is a rectangle with all sides equal.
As of now, the rectangle is the only predefined closed shape that canvas element offers. That is, the canvas has methods (two) to draw only rectangular closed shapes. The canvas has one indirect methods to draw a circle. As of now, the canvas does not have any other method to draw other closed shapes, like the ellipse.
Drawing an Independent Circle
You can use the context arc method to draw a circle. In this case you make the startAngle 0 degrees and the endAngle 360 degrees. In radians these are 0 and 6.28. Read and try the following code that draws and independent circle:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<canvas id="C1" width="400" height="300" style="float:right;border:2px solid red">
</canvas>
<script type="text/ECMAScript">
cv = document.getElementById('C1');
if (cv.getContext)
{
cntxt = cv.getContext('2d');
cntxt.beginPath();
cntxt.lineWidth = 5;
cntxt.strokeStyle = "blue";
cntxt.arc(200,50,40,0,6.28);
cntxt.stroke();
}
</script>
</body>
</html>
The arc method is more of a subpath method. You can fill in the circle with a color. The following code illustrates this:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<canvas id="C1" width="400" height="300" style="float:right;border:2px solid red">
</canvas>
<script type="text/ECMAScript">
cv = document.getElementById('C1');
if (cv.getContext)
{
cntxt = cv.getContext('2d');
cntxt.beginPath();
cntxt.lineWidth = 5;
cntxt.strokeStyle = "blue";
cntxt.arc(200,50,40,0,6.28);
cntxt.fillStyle = "red";
cntxt.fill();
cntxt.stroke();
}
</script>
</body>
</html>
That is all for this tutorial. If in future, more features are added to the concept, I will increase the length of the tutorial. We continue in the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT