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
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 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.
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.
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.
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.
The following code draws two triangles using the same context. The two triangles have two different path colors.
<canvas id="C1" width="400" height="300" style="float:right;border:2px solid red">
cv = document.getElementById('C1');
cntxt = cv.getContext('2d');
cntxt.lineWidth = 6;
cntxt.strokeStyle = "green";
cntxt.lineWidth = 6;
cntxt.strokeStyle = "red";
That is it for this part of the series.
Related LinksDOM 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