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

# Graphics

> [`Graphics`](#abstract-graphics)

## Classes

### `abstract` Graphics

#### Constructors

##### Constructor

```ts
new Graphics(): Graphics;
```

###### Returns

#### Methods

##### clearCanvas()

```ts
static clearCanvas(context, preserveTransform?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `context` | `CanvasRenderingContext2D` | `undefined` |
| `preserveTransform` | `boolean` | `false` |

###### Returns

`void`

##### clipPath()

```ts
static clipPath(ctx, path): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `ctx` | `CanvasRenderingContext2D` |
| `path` | `Path` |

###### Returns

`void`

##### drawCross()

```ts
static drawCross(
   ctx, 
   x, 
   y, 
   size, 
   width, 
   baselineColor): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `ctx` | `CanvasRenderingContext2D` |
| `x` | `number` |
| `y` | `number` |
| `size` | `number` |
| `width` | `number` |
| `baselineColor` | `string` |

###### Returns

`void`

##### drawDashedLine()

```ts
static drawDashedLine(
   ctx, 
   x0, 
   y0, 
   x1, 
   y1, 
   lineWidth, 
   color, 
   altColor, 
   dashWidth, 
   altDashWidth, 
   opacity?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `ctx` | `CanvasRenderingContext2D` | `undefined` |
| `x0` | `number` | `undefined` |
| `y0` | `number` | `undefined` |
| `x1` | `number` | `undefined` |
| `y1` | `number` | `undefined` |
| `lineWidth` | `number` | `undefined` |
| `color` | `string` | `undefined` |
| `altColor` | `string` | `undefined` |
| `dashWidth` | `number` | `undefined` |
| `altDashWidth` | `number` | `undefined` |
| `opacity` | `number` | `1` |

###### Returns

`void`

##### drawEllipse()

```ts
static drawEllipse(
   ctx, 
   center, 
   size, 
   fillColor, 
   borderWidth, 
   borderColor, 
   opacity?, 
   strokeDash?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `ctx` | `CanvasRenderingContext2D` | `undefined` |
| `center` | `PointF` | `undefined` |
| `size` | `SizeF` | `undefined` |
| `fillColor` | `string` | `undefined` |
| `borderWidth` | `number` | `undefined` |
| `borderColor` | `string` | `undefined` |
| `opacity` | `number` | `1` |
| `strokeDash` | `number`[] | `null` |

###### Returns

`void`

##### drawImage()

```ts
static drawImage(
   ctx, 
   image, 
   rotatedRectangle, 
   scaleX, 
   scaleY, 
   disableSmoothing?, 
   maskColor?, 
   opacity?, 
   imageRect?, 
   increaseImageRect?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `ctx` | `CanvasRenderingContext2D` | `undefined` |
| `image` | `HTMLCanvasElement` \| `HTMLImageElement` | `undefined` |
| `rotatedRectangle` | `RotatedRectangleF` | `undefined` |
| `scaleX` | `number` | `undefined` |
| `scaleY` | `number` | `undefined` |
| `disableSmoothing` | `boolean` | `false` |
| `maskColor` | `any` | `null` |
| `opacity` | `number` | `1` |
| `imageRect` | `RectangleF` | `null` |
| `increaseImageRect` | `number` | `0` |

###### Returns

`void`

##### drawLine()

```ts
static drawLine(
   ctx, 
   x, 
   y, 
   x1, 
   y1, 
   lineWidth, 
   lineColor, 
   opacity?, 
   dashWidth?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `ctx` | `CanvasRenderingContext2D` | `undefined` |
| `x` | `number` | `undefined` |
| `y` | `number` | `undefined` |
| `x1` | `number` | `undefined` |
| `y1` | `number` | `undefined` |
| `lineWidth` | `number` | `undefined` |
| `lineColor` | `string` | `undefined` |
| `opacity` | `number` | `1` |
| `dashWidth` | `number`[] | `null` |

###### Returns

`void`

##### drawPath()

```ts
static drawPath(
   ctx, 
   path, 
   center, 
   transform, 
   borderWidth, 
   borderColor, 
   opacity, 
   dashWidth?, 
   altBorderColor?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `ctx` | `CanvasRenderingContext2D` | `undefined` |
| `path` | `any` | `undefined` |
| `center` | `PointF` | `undefined` |
| `transform` | `Transform` | `undefined` |
| `borderWidth` | `number` | `undefined` |
| `borderColor` | `string` | `undefined` |
| `opacity` | `number` | `undefined` |
| `dashWidth` | `number`[] | `[]` |
| `altBorderColor` | `string` | `null` |

###### Returns

`void`

##### drawPolyline()

```ts
static drawPolyline(
   ctx, 
   points, 
   lineWidth, 
   lineColor, 
   opacity): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `ctx` | `CanvasRenderingContext2D` |
| `points` | `PointF`[] |
| `lineWidth` | `number` |
| `lineColor` | `string` |
| `opacity` | `number` |

###### Returns

`void`

##### drawRectangle()

```ts
static drawRectangle(
   ctx, 
   rotatedRectangle, 
   borderWidth, 
   borderColor, 
   opacity): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `ctx` | `CanvasRenderingContext2D` |
| `rotatedRectangle` | `RotatedRectangleF` |
| `borderWidth` | `number` |
| `borderColor` | `string` |
| `opacity` | `number` |

###### Returns

`void`

##### drawRoundedRectangle()

```ts
static drawRoundedRectangle(
   ctx, 
   rect, 
   rounded): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `ctx` | `CanvasRenderingContext2D` |
| `rect` | `RectangleF` |
| `rounded` | `number` |

###### Returns

`void`

##### drawStroke()

```ts
static drawStroke(
   ctx, 
   path, 
   center, 
   transform, 
   borderWidth, 
   borderColor, 
   altBorderColor, 
   opacity, 
   dash): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `ctx` | `CanvasRenderingContext2D` |
| `path` | `any` |
| `center` | `PointF` |
| `transform` | `Transform` |
| `borderWidth` | `number` |
| `borderColor` | `string` |
| `altBorderColor` | `string` |
| `opacity` | `number` |
| `dash` | `number`[] |

###### Returns

`void`

##### fillPath()

```ts
static fillPath(
   ctx, 
   path, 
   center, 
   transform, 
   fillColor, 
   opacity?): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `ctx` | `CanvasRenderingContext2D` |
| `path` | `any` |
| `center` | `PointF` |
| `transform` | `Transform` |
| `fillColor` | `string` |
| `opacity?` | `number` |

###### Returns

`void`

##### fillRectangle()

```ts
static fillRectangle(
   ctx, 
   rotatedRectangle, 
   fillColor, 
   opacity?): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `ctx` | `CanvasRenderingContext2D` |
| `rotatedRectangle` | `RotatedRectangleF` |
| `fillColor` | `any` |
| `opacity?` | `number` |

###### Returns

`void`

##### isFullTransparentColor()

```ts
static isFullTransparentColor(color): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `color` | `any` |

###### Returns

`boolean`

##### measureText()

```ts
static measureText(
   ctx, 
   text, 
   point, 
   font, 
   fillColor?, 
   strokeColor?, 
   angle?): TextMetrics;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `ctx` | `CanvasRenderingContext2D` | `undefined` |
| `text` | `string` | `undefined` |
| `point` | `PointF` | `undefined` |
| `font` | `string` | `undefined` |
| `fillColor` | `string` | `null` |
| `strokeColor` | `string` | `null` |
| `angle` | `number` | `0` |

###### Returns

`TextMetrics`

##### path()

```ts
static path(
   ctx, 
   path, 
   center, 
   transform, 
   fillColor, 
   borderWidth, 
   borderColor, 
   opacity, 
   dashWidth, 
   altBorderColor?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `ctx` | `CanvasRenderingContext2D` | `undefined` |
| `path` | `any` | `undefined` |
| `center` | `PointF` | `undefined` |
| `transform` | `Transform` | `undefined` |
| `fillColor` | `string` | `undefined` |
| `borderWidth` | `number` | `undefined` |
| `borderColor` | `string` | `undefined` |
| `opacity` | `number` | `undefined` |
| `dashWidth` | `number`[] | `undefined` |
| `altBorderColor` | `string` | `null` |

###### Returns

`void`

##### rectangle()

```ts
static rectangle(
   ctx, 
   rotatedRectangle, 
   borderWidth, 
   borderColor, 
   fillColor?, 
   opacity?, 
   strokeDash?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `ctx` | `CanvasRenderingContext2D` | `undefined` |
| `rotatedRectangle` | `RotatedRectangleF` | `undefined` |
| `borderWidth` | `number` | `undefined` |
| `borderColor` | `string` | `undefined` |
| `fillColor` | `any` | `null` |
| `opacity` | `number` | `1` |
| `strokeDash` | `number`[] | `null` |

###### Returns

`void`

##### text()

```ts
static text(
   ctx, 
   text, 
   point, 
   font, 
   fillColor?, 
   strokeColor?, 
   angle?, 
   maxWidth?, 
   textAlign?, 
   textBaseline?, 
   background?, 
   border?, 
   borderWidth?, 
   backgroundMargin?, 
   backgroundCornerRadius?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `ctx` | `CanvasRenderingContext2D` | `undefined` |
| `text` | `string` | `undefined` |
| `point` | `PointF` | `undefined` |
| `font` | `string` | `undefined` |
| `fillColor` | `string` | `null` |
| `strokeColor` | `string` | `null` |
| `angle` | `number` | `0` |
| `maxWidth` | `any` | `null` |
| `textAlign` | `CanvasTextAlign` | `"left"` |
| `textBaseline` | `CanvasTextBaseline` | `"alphabetic"` |
| `background` | `string` | `null` |
| `border` | `string` | `null` |
| `borderWidth` | `number` | `0` |
| `backgroundMargin` | `any` | `...` |
| `backgroundCornerRadius` | `number` | `0` |

###### Returns

`void`