# Path Object

This documentation for fontkit is created and provided by the Typogram team. Itâ€™s a third-party documentation intended to delve deeper into the fontkit API. For the most accurate information, refer to fontkitâ€™s official documentation.

The `Path`

object in Fontkit represents the outline of a glyph. You can use it to render the glyph on a canvas, SVG, or any other graphic surface.

**Properties**:

**Properties**:

`path.commands`

`path.commands`

An array of path commands. Each command is an object with a `type`

property, which can be 'moveTo', 'lineTo', 'curveTo', 'qcurveTo', or 'closePath', and the corresponding x and y coordinates (or control points for curves).

`path.bbox`

`path.bbox`

The bounding box of the path, which is the rectangle that encloses the path's outline. This object contains properties: `minX`

, `minY`

, `maxX`

, and `maxY`

.

`path.cbox`

`path.cbox`

The control bounding box of the path, which is similar to the bounding box but includes Bezier control points.

**Methods**:

**Methods**:

`path.rotate(angle)`

`path.rotate(angle)`

**Description**: Rotates the path around the origin`(0, 0)`

.**Parameters**:`angle`

: The rotation angle in radians.

**Returns**: The modified`Path`

object.**Example**: Rotating a path by 45 degrees (converted to radians):

`path.scale(scaleX, scaleY = scaleX)`

`path.scale(scaleX, scaleY = scaleX)`

**Description**: Scales the path by a factor in the x and y directions.**Parameters**:`scaleX`

: The scaling factor in the x-direction.`scaleY`

: (Optional) The scaling factor in the y-direction. If not provided, it defaults to the value of`scaleX`

, resulting in uniform scaling.

**Returns**: The modified`Path`

object.**Example**: Scaling a path by 2x in the x-direction and 0.5x in the y-direction:

`path.transform(m0, m1, m2, m3, m4, m5)`

`path.transform(m0, m1, m2, m3, m4, m5)`

**Description**: Applies a 2x3 transformation matrix to the path. This can represent combinations of translations, rotations, scaling, and skewing.**Parameters**:`m0`

,`m1`

,`m2`

,`m3`

,`m4`

,`m5`

: The elements of the 2x3 transformation matrix.

**Returns**: The modified`Path`

object.**Example**: Applying a transformation matrix:

`path.translate(x, y)`

`path.translate(x, y)`

**Description**: Translates (moves) the path by a specified amount in the x and y directions.**Parameters**:`x`

: The translation amount in the x-direction.`y`

: The translation amount in the y-direction.

**Returns**: The modified`Path`

object.**Example**: Translating a path by 10 units in x and 20 units in y:

`path.mapPoints(fn)`

`path.mapPoints(fn)`

**Description**: Maps each point in the path to a new point by applying a given function. This is a general-purpose method that allows you to apply arbitrary transformations to each point in the path.**Parameters**:`fn`

: A function that takes a point as an argument (an object with`x`

and`y`

properties) and returns a new point (also an object with`x`

and`y`

properties).

**Returns**: The modified`Path`

object.**Example**: Mapping points to apply a custom transformation:

`path.moveTo(x, y)`

`path.moveTo(x, y)`

Moves the "pen" to a new location without drawing anything. This sets the starting point for a new sub-path.

`path.lineTo(x, y)`

`path.lineTo(x, y)`

Draws a straight line from the current position to the specified (`x`

, `y`

) point.

`path.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)`

`path.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)`

Draws a cubic Bezier curve from the current position to the specified (`x`

, `y`

) point using (`cp1x`

, `cp1y`

) as the control point for the start of the curve and (`cp2x`

, `cp2y`

) as the control point for the end of the curve.

`path.quadraticCurveTo(cpx, cpy, x, y)`

`path.quadraticCurveTo(cpx, cpy, x, y)`

Draws a quadratic Bezier curve from the current position to the specified (`x`

, `y`

) point using (`cpx`

, `cpy`

) as the control point.

`path.closePath()`

`path.closePath()`

Closes the current sub-path by drawing a straight line back to its starting point. This is often used when defining closed shapes.

`path.toSVG()`

`path.toSVG()`

Converts the path to an SVG path data string, which can be used to render the path using SVG.

`path.toFunction()`

`path.toFunction()`

Converts the path to a JavaScript function with an API similar to the Canvas 2D context. This can be used for custom rendering.

Last updated