Paths in HTML Canvas

HTML Canvas 2D Context – Part 6

Foreword: In this part of the series, I explain what path is, how to build a path, how to draw a path, how to fill and stroke a path.

By: Chrysanthus Date Published: 16 Apr 2016

Introduction

This is part 6 of my series, HTML Canvas 2D Context. In this part of the series, I explain what path is, how to build a path, how to draw a path, how to fill and stroke a path. You should have read the previous parts of the series before coming here, as this is a continuation.

A Path
A path is a line of any thickness. It can be straight or curved. A path can be divided into subpaths. Technically, a path consists of zero or one or more subpaths. From a programming point of view, a path consists of points placed one after another.

Context
Context is software object (code) in memory that deals with the context of drawing. Put another way, context is software object in memory that handles drawing. A reference (object identifier) to the context object is obtained by code, from the reference to the HTML canvas element.

Building Paths
To build a path, you have to use some of the following functions (syntaxes):

context . moveTo(x, y)
    This function, takes the context to a new position in the canvas element area to start drawing a line. At that point, a subpath is created (begun).

context . lineTo(x, y)
    Adds the given point to the current subpath, connected to the previous one by a straight line. You can use this function more than once for the same subpath.

context . closePath()
    Marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath. You can use the following statements to draw a triangle:

context . moveTo(x1, y1);
context . lineTo(x2, y2);
context . lineTo(x3, y3);
context . closePath();

If you want but a curve instead of a straight line, you can use:

    context . quadraticCurveTo(cpx, cpy, x, y)

or you can use:

    context . bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

I have talked about these functions in one of the previous parts of the series.

To have an arc (of a circle), use:

context . arcTo(x1, y1, x2, y2, radius)
    which adds an arc with the given control points and radius to the current subpath, connected to the previous point by a straight line. Remember the V.

To have an arc or a complete circle, use:

context . arc(x, y, radius, startAngle, endAngle [, counterclockwise ] )
    which adds points to the subpath such that the arc described by the circumference of the circle described by the arguments, starting at the given start angle and ending at the given end angle, going in the given direction (defaulting to clockwise), is added to the path, connected to the previous point by a straight line. Remember the V.

context . rect(x, y, w, h)
    This method adds a new closed subpath to the path, representing a given rectangle.

Drawing Paths to the Canvas
To draw a path, you have to use some of the following functions (syntaxes):

context . beginPath()
    When the context is drawing a path and its subpaths, this is the method that puts an end to the current path and starts a new path using the same context. You still have to use the moveTo() method for the new path.

context . stroke()
    paints the subpaths of the current path (or the given path) with the current stroke color  or style.

context . fill()
    Fills the subpaths of the current path (or the given path) with the current fill color or style.

context . isPointInPath(x, y)
    Returns true if the given point is in the current path.

context . drawFocusIfNeeded(element)
    Informs the user of the canvas location for the fallback element, based on the current path. If the given element has focus, draws a focus outline around the current path following the platform or user agent conventions for focus outlines as defined by the user agent.

Fill and Stroke Styles
To determine the style for the fill() and stroke method you have to use the corresponding method below:

context . strokeStyle [ = value ]
Returns the current style used for stroking shapes. Can be set, to change the stroke style. The style can be either a string containing a CSS color, or a CanvasGradient or CanvasPattern object – see later.

context . fillStyle [ = value ]
Returns the current style used for filling shapes. Can be set, to change the fill style. The style can be either a string containing a CSS color, or a CanvasGradient or CanvasPattern object – see later.

Note: fillStyle provides the color or style for the fill() method that fills the inside of a closed path structure (e.g. triangle, rectangle, circle). On the other hand, strokeStyle provides the color or style for the stroke() method for a path, which may be a closed path.

Example
The following code draws two triangles using the same context. The two triangles have two different path colors.

<!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.lineWidth = 6;
                cntxt.moveTo(40,90);
                cntxt.strokeStyle = "green";
                cntxt.lineTo(100,20);
                cntxt.lineTo(150,120);
                cntxt.closePath();
                cntxt.stroke();

                cntxt.beginPath();
                cntxt.lineWidth = 6;
                cntxt.moveTo(240,90);
                cntxt.strokeStyle = "red";
                cntxt.lineTo(300,20);
                cntxt.lineTo(350,120);
                cntxt.closePath();
                cntxt.stroke();
            }

    </script>

</body>
</html>

That is it for this part of the series.

Chrys

Broad Network

Related Articles

Paths in HTML Canvas

HTML Canvas 2D Context – Part 6

Introduction

Related Links

Comments