# 2-Dimensional Graphics Paths

Back to documentation index.

## Introduction

This article describes two-dimensional paths. This is an extra included in the HTML 3D Library.

## Paths

A path is a collection of two-dimensional line segments and/or curves. Many paths describe closed figures or connected strings of lines and curves. The `GraphicsPath` class currently supports line segments, quadratic and cubic Bézier curves, and elliptical arcs, as well as closed figures made from several path segments.

## How to Use

2D paths are implemented in a class called `H3DU.GraphicsPath`, found in the file extras/path.js in the HTML 3D Library download. To use this class, you must include the script "extras/path.js", as in this example.

```<script type="text/javascript" src="h3du_min.js"></script>
<script type="text/javascript" src="extras/path.js"></script>
```

## Creating Paths

There are two ways to create paths: using an SVG path string, or by calling methods that add its segments.

### SVG Path String

If you've worked with SVG, you may be familiar with this format for describing 2D paths. An SVG path string consists of one or more path commands that start with a single letter. The following are examples of SVG path strings:

```M50,50L100,100,100,150,150,200

M50,20C230,245,233,44,22,44

M50,50H80V60H50V70H50
```

The "M" command moves the current position, the "L", "H", and "V" commands create lines, the "Q", "C", "S", and "T" commands create Bézier curves, the "A" command creates elliptical arcs, and the "Z" command closes the path. If the letters are lower-cased, X and Y coordinates are relative to the current position.

For more information, see the H3DU.GraphicsPath.fromString method documentation. That method is also how you create a 2D path from an SVG path string, as in this example:

```var path = H3DU.GraphicsPath.fromString("M50,20C230,245,233,44,22,44")
```

### Building Paths

The other way to make paths is to call the `H3DU.GraphicsPath` constructor and call methods to add path segments to the path.

The `H3DU.GraphicsPath` object stores a current position and a starting position, and many methods don't have you specify a starting position, to cover the common case of drawing a series of connected lines and curves.

• .moveTo(x, y) - Moves the starting position and current position.
• .lineTo(x, y) - Adds a line segment from the current position to a new ending position.
• .closePath() - Closes the path by drawing a line to the starting point, if needed.

## Path Segments

Each path can include a number of line segments, Bézier curves, and elliptical arcs. Line segments are relatively easy to understand. The other two kinds of segments deserve some discussion.

A Bézier curve is a parametric curve based on a polynomial formula. In this kind of curve the endpoints are defined as they are, but the other points define the shape of the curve and generally don't cross the curve. A quadratic Bézier curve uses 3 points. A cubic Bézier curve uses 4 points.

An elliptic arc is a curve which forms part of an ellipse. There are several ways to parameterize an elliptic arc, as seen in the .arc(), .arcTo(), and .arcSvgTo() methods of the `H3DU.GraphicsPath` class.

## Methods

• The H3DU.GraphicsPath.getLength method finds the approximate length of a path.
• The H3DU.GraphicsPath.getBounds method finds the axis-aligned bounding box of a path.

Back to documentation index.