Broad Network


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

This is part 4 of my series, HTML Canvas 2D Context. In this part of the series, I explain how to cause DOM to draw closed shapes in the html canvas element. I assume you have read the previous parts of the series, because this is a continuation.

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.

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
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 HTML
DOM 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

Comments

Become the Writer's Follower
Send the Writer a Message