# d3-path

Say you have some code that draws to a 2D canvas:

```
function drawCircle(context, radius) {
context.moveTo(radius, 0);
context.arc(0, 0, radius, 0, 2 * Math.PI);
}
```

The d3-path module lets you take this exact code and additionally render to SVG. It works by serializing CanvasPathMethods calls to SVG path data. For example:

```
const context = d3.path();
drawCircle(context, 40);
pathElement.setAttribute("d", context.toString());
```

Now code you write once can be used with both Canvas (for performance) and SVG (for convenience). For a practical example, see d3-shape.

## Installing

If you use npm, `npm install d3-path`

. You can also download the latest release on GitHub. In modern browsers, you can import d3-path from Skypack:

```
<script type="module">
import {path} from "https://cdn.skypack.dev/d3-path@3";
const p = path();
p.moveTo(1, 2);
p.lineTo(3, 4);
p.closePath();
</script>
```

For legacy environments, you can load d3-path’s UMD bundle from an npm-based CDN such as jsDelivr; a `d3`

global is exported:

```
<script src="https://cdn.jsdelivr.net/npm/d3-path@3"></script>
<script>
const path = d3.path();
</script>
```

## API Reference

# d3.**path**() · Source, Examples

Constructs a new path serializer that implements CanvasPathMethods.

# *path*.**moveTo**(*x*, *y*)

Move to the specified point ⟨*x*, *y*⟩. Equivalent to *context*.moveTo and SVG’s “moveto” command.

# *path*.**closePath**()

Ends the current subpath and causes an automatic straight line to be drawn from the current point to the initial point of the current subpath. Equivalent to *context*.closePath and SVG’s “closepath” command.

# *path*.**lineTo**(*x*, *y*)

Draws a straight line from the current point to the specified point ⟨*x*, *y*⟩. Equivalent to *context*.lineTo and SVG’s “lineto” command.

# *path*.**quadraticCurveTo**(*cpx*, *cpy*, *x*, *y*)

Draws a quadratic Bézier segment from the current point to the specified point ⟨*x*, *y*⟩, with the specified control point ⟨*cpx*, *cpy*⟩. Equivalent to *context*.quadraticCurveTo and SVG’s quadratic Bézier curve commands.

# *path*.**bezierCurveTo**(*cpx1*, *cpy1*, *cpx2*, *cpy2*, *x*, *y*)

Draws a cubic Bézier segment from the current point to the specified point ⟨*x*, *y*⟩, with the specified control points ⟨*cpx1*, *cpy1*⟩ and ⟨*cpx2*, *cpy2*⟩. Equivalent to *context*.bezierCurveTo and SVG’s cubic Bézier curve commands.

# *path*.**arcTo**(*x1*, *y1*, *x2*, *y2*, *radius*)

Draws a circular arc segment with the specified *radius* that starts tangent to the line between the current point and the specified point ⟨*x1*, *y1*⟩ and ends tangent to the line between the specified points ⟨*x1*, *y1*⟩ and ⟨*x2*, *y2*⟩. If the first tangent point is not equal to the current point, a straight line is drawn between the current point and the first tangent point. Equivalent to *context*.arcTo and uses SVG’s elliptical arc curve commands.

# *path*.**arc**(*x*, *y*, *radius*, *startAngle*, *endAngle*[, *anticlockwise*])

Draws a circular arc segment with the specified center ⟨*x*, *y*⟩, *radius*, *startAngle* and *endAngle*. If *anticlockwise* is true, the arc is drawn in the anticlockwise direction; otherwise, it is drawn in the clockwise direction. If the current point is not equal to the starting point of the arc, a straight line is drawn from the current point to the start of the arc. Equivalent to *context*.arc and uses SVG’s elliptical arc curve commands.

# *path*.**rect**(*x*, *y*, *w*, *h*)

Creates a new subpath containing just the four points ⟨*x*, *y*⟩, ⟨*x* + *w*, *y*⟩, ⟨*x* + *w*, *y* + *h*⟩, ⟨*x*, *y* + *h*⟩, with those four points connected by straight lines, and then marks the subpath as closed. Equivalent to *context*.rect and uses SVG’s “lineto” commands.

# *path*.**toString**()

Returns the string representation of this *path* according to SVG’s path data specification.