# Polygon
The **Polygon** component is used to draw a polygon.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
Not supported
## APIs
Polygon(options?: PolygonOptions)
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| options | [PolygonOptions](ts-drawing-components-polygon.md#polygonoptions18) | No| Options for drawing a polygon.|
## PolygonOptions18+
Describes the options for drawing a polygon.
**Widget capability**: This API can be used in ArkTS widgets since API version 18.
**Atomic service API**: This API can be used in atomic services since API version 18.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| width | string \| number | No| Width. The value must be greater than or equal to 0.
Default value: **0**.
Default unit: vp.
An invalid value is handled as the default value.|
| height | string \| number | No| Height. The value must be greater than or equal to 0.
Default value: **0**.
Default unit: vp.
Invalid values are treated as the default value.|
## Attributes
In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported.
### points
points(value: Array<Point>)
Sets the vertex coordinates of the polygon. Invalid values are treated as the default value.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------------------------------------------------------------ | ---- | ------------------------------------- |
| value | Array<[Point](ts-drawing-components-polyline.md#point)> | Yes | Vertex coordinates of the polygon.
Default value: **[]**.
Default unit: vp.|
### fill
fill(value: ResourceColor)
Sets the color of the fill area. Invalid values are treated as the default value. If this attribute and the universal attribute **foregroundColor** are both set, whichever is set later takes effect.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------------------------------------------ | ---- | -------------------------------------- |
| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Color of the fill area.
Default value: **Color.Black**.|
### fillOpacity
fillOpacity(value: number | string | Resource)
Opacity of the fill area. The value range is [0.0, 1.0]. A value less than 0.0 is treated as **0.0**. A value greater than 1.0 is treated as **1.0**. Any other value is treated as **1.0**.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------------------------------------------------------------ | ---- | ------------------------------ |
| value | number \| string \| [Resource](ts-types.md#resource) | Yes | Opacity of the fill area.
Default value: **1**.|
### stroke
stroke(value: ResourceColor)
Sets the stroke color. If this attribute is not set, the component does not have any stroke. If the value is invalid, no stroke will be drawn.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------------------------------------------ | ---- | ---------- |
| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Stroke color.|
### strokeDashArray
strokeDashArray(value: Array<any>)
Stroke dashes. The value must be greater than or equal to 0. Invalid values are treated as the default value.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ---------------- | ---- | ------------------------- |
| value | Array<any> | Yes | Stroke dashes.
Default value: **[]**.
Default unit: vp.|
### strokeDashOffset
strokeDashOffset(value: number | string)
Sets the offset of the start point for drawing the stroke. Invalid values are treated as the default value.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | -------------------------- | ---- | ------------------------------------ |
| value | number \| string | Yes | Offset of the start point for drawing the stroke.
Default value: **0**.
Default unit: vp.|
### strokeLineCap
strokeLineCap(value: LineCapStyle)
Sets the cap style of the stroke.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------------------------------------------------- | ---- | ------------------------------------------------ |
| value | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Yes | Cap style of the stroke.
Default value: **LineCapStyle.Butt**.|
### strokeLineJoin
strokeLineJoin(value: LineJoinStyle)
Sets the join style of the stroke.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | --------------------------------------------------- | ---- | -------------------------------------------------- |
| value | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Yes | Join style of the stroke.
Default value: **LineJoinStyle.Miter**.|
### strokeMiterLimit
strokeMiterLimit(value: number | string)
Sets the limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter. This attribute works only when **strokeLineJoin** is set to **LineJoinStyle.Miter**.
The value must be greater than or equal to 1.0. If the value is in the [0, 1) range, the value **1.0** will be used. In other cases, the default value will be used.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | -------------------------- | ---- | ---------------------------------------------- |
| value | number \| string | Yes | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.
Default value: **4**.|
### strokeOpacity
strokeOpacity(value: number | string | Resource)
Stroke opacity. The value range is [0.0, 1.0]. A value less than 0.0 evaluates to the value **0.0**. A value greater than 1.0 evaluates to the value **1.0**. Any other value evaluates to the value **1.0**.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------------------------------------------------------------ | ---- | -------------------------- |
| value | number \| string \| [Resource](ts-types.md#resource) | Yes | Stroke opacity.
Default value: **1**.|
### strokeWidth
strokeWidth(value: Length)
Sets the stroke width. If this attribute is of the string type, percentage values are not supported and will be treated as 1 px.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ---------------------------- | ---- | ------------------------ |
| value | [Length](ts-types.md#length) | Yes | Stroke width. The value must be greater than or equal to 0.
Default value: **1**.
Default unit: vp.
Invalid values are treated as the default value.|
### antiAlias
antiAlias(value: boolean)
Specifies whether anti-aliasing is enabled.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------- | ---- | ------------------------------------- |
| value | boolean | Yes | Whether anti-aliasing is enabled.
**true**: Anti-aliasing is enabled.
**false**: Anti-aliasing is disabled.
Default value: **true**.|
## Point
Describes the coordinates of a point.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
| Name | Type | Description |
| --------- | -------------------- | ------------------------------------------------------------ |
| Point | [number, number] | Coordinates of a point. The first parameter is the x-coordinate, and the second parameter is the y-coordinate (relative coordinate).|
## Example
This example demonstrates how to use **points**, **fill**, **fillOpacity**, and **stroke** to draw polygons with specific coordinates, fill colors, opacity, and stroke colors.
```ts
// xxx.ets
@Entry
@Component
struct PolygonExample {
build() {
Column({ space: 10 }) {
// Draw a triangle in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing point is (50, 100).
Polygon({ width: 100, height: 100 })
.points([[0, 0], [50, 100], [100, 0]])
.fill(Color.Green)
// Draw a quadrilateral in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing points are (0, 100) and (100, 100).
Polygon()
.width(100)
.height(100)
.points([[0, 0], [0, 100], [100, 100], [100, 0]])
.fillOpacity(0)
.strokeWidth(5)
.stroke(Color.Blue)
// Draw a pentagon in a 100 x 100 rectangle. The start point is (50, 0), the end point is (100, 50), and the passing points are (0, 50), (20, 100), and (80, 100).
Polygon()
.width(100)
.height(100)
.points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]])
.fill(Color.Red)
.fillOpacity(0.6)
}.width('100%').margin({ top: 10 })
}
}
```
