---
title: "Path | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Path/"
---

# Path

> [`Path`](#path)

## Classes

### Path

#### Constructors

##### Constructor

```ts
new Path(path?): Path;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `path?` | `string` |

###### Returns

#### Accessors

##### length

###### Get Signature

```ts
get length(): number;
```

###### Returns

`number`

##### segments

###### Get Signature

```ts
get segments(): PathSegment[];
```

###### Returns

[`PathSegment`](#pathsegment)[]

#### Methods

##### addPath()

```ts
addPath(path): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `path` | [`Path`](#path) |

###### Returns

`void`

##### addPathChanged()

```ts
addPathChanged(handler): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `handler` | (`t`) => `any` |

###### Returns

`void`

##### calculateBounds()

```ts
calculateBounds(): RectangleF;
```

###### Returns

[`RectangleF`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/RectangleF.md#rectanglef)

##### clone()

```ts
clone(): Path;
```

###### Returns

[`Path`](#path)

##### close()

```ts
close(): void;
```

###### Returns

`void`

##### cubicTo()

```ts
cubicTo(
   cx1, 
   cy1, 
   cx2, 
   cy2, 
   x, 
   y): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `cx1` | `number` |
| `cy1` | `number` |
| `cx2` | `number` |
| `cy2` | `number` |
| `x` | `number` |
| `y` | `number` |

###### Returns

`void`

##### draw()

```ts
draw(ctx): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `ctx` | `CanvasRenderingContext2D` |

###### Returns

`void`

##### equals()

```ts
equals(p): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `p` | [`Path`](#path) |

###### Returns

`boolean`

##### isEqual()

```ts
isEqual(path): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `path` | [`Path`](#path) |

###### Returns

`boolean`

##### lineTo()

```ts
lineTo(x, y): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `x` | `number` |
| `y` | `number` |

###### Returns

`void`

##### moveTo()

```ts
moveTo(x, y): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `x` | `number` |
| `y` | `number` |

###### Returns

`void`

##### quadraticTo()

```ts
quadraticTo(
   cx, 
   cy, 
   x, 
   y): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `cx` | `number` |
| `cy` | `number` |
| `x` | `number` |
| `y` | `number` |

###### Returns

`void`

##### removePathChanged()

```ts
removePathChanged(handler): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `handler` | `any` |

###### Returns

`void`

##### rotateAt()

```ts
rotateAt(angle, center): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `angle` | `number` |
| `center` | [`PointF`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/PointF.md#pointf) |

###### Returns

`void`

##### scale()

```ts
scale(scaleX, scaleY): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `scaleX` | `number` |
| `scaleY` | `number` |

###### Returns

`void`

##### toString()

```ts
toString(): string;
```

###### Returns

`string`

##### transform()

```ts
transform(transform, center): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `transform` | [`Transform`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Transform.md#transform) |
| `center` | [`PointF`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/PointF.md#pointf) |

###### Returns

`void`

##### translate()

```ts
translate(offsetX, offsetY): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `offsetX` | `number` |
| `offsetY` | `number` |

###### Returns

`void`

##### ellipse()

```ts
static ellipse(
   left, 
   top, 
   width, 
   height): Path;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `left` | `number` |
| `top` | `number` |
| `width` | `number` |
| `height` | `number` |

###### Returns

[`Path`](#path)

##### rectangle()

```ts
static rectangle(
   left, 
   top, 
   width, 
   height): Path;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `left` | `number` |
| `top` | `number` |
| `width` | `number` |
| `height` | `number` |

###### Returns

[`Path`](#path)

##### rotatedRectangle()

```ts
static rotatedRectangle(rectangle): Path;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `rectangle` | [`RotatedRectangleF`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/RotatedRectangleF.md#rotatedrectanglef) |

###### Returns

[`Path`](#path)

##### roundedRectangle()

```ts
static roundedRectangle(
   left, 
   top, 
   width, 
   height, 
   radiuses): Path;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `left` | `number` |
| `top` | `number` |
| `width` | `number` |
| `height` | `number` |
| `radiuses` | [`SizeF`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/SizeF.md#sizef)[] |

###### Returns

[`Path`](#path)

***

### PathSegment

#### Constructors

##### Constructor

```ts
new PathSegment(name, points?): PathSegment;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `name` | `string` |
| `points?` | [`PointF`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/PointF.md#pointf)[] |

###### Returns

[`PathSegment`](#pathsegment)

#### Accessors

##### length

###### Get Signature

```ts
get length(): number;
```

###### Returns

`number`

##### name

###### Get Signature

```ts
get name(): string;
```

###### Returns

`string`

#### Methods

##### clone()

```ts
clone(): PathSegment;
```

###### Returns

[`PathSegment`](#pathsegment)

##### draw()

```ts
draw(ctx): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `ctx` | `CanvasRenderingContext2D` |

###### Returns

`void`

##### getPoint()

```ts
getPoint(index): PointF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `index` | `number` |

###### Returns

[`PointF`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/PointF.md#pointf)

##### rotateAt()

```ts
rotateAt(angle, center): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `angle` | `number` |
| `center` | [`PointF`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/PointF.md#pointf) |

###### Returns

`void`

##### scale()

```ts
scale(scaleX, scaleY): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `scaleX` | `number` |
| `scaleY` | `number` |

###### Returns

`void`

##### toString()

```ts
toString(): string;
```

###### Returns

`string`

##### transform()

```ts
transform(transform, center): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `transform` | [`Transform`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Transform.md#transform) |
| `center` | [`PointF`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/PointF.md#pointf) |

###### Returns

`void`

##### translate()

```ts
translate(offsetX, offsetY): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `offsetX` | `number` |
| `offsetY` | `number` |

###### Returns

`void`