Closed Shapes in HTML Canvas
HTML Canvas 2D Context – Part 4
Foreword: In this part of the series, I explain how to cause DOM to draw closed shapes in the html canvas element.
By: Chrysanthus Date Published: 16 Apr 2016
Introduction
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.
<!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.
Rectangle as a Subpath
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 is a rectangle with all sides equal.
Predefined Closed Shapes
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
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
BACK NEXT