| DEFAULT | Default style. The caret width is fixed at 1.5 vp, and the caret height is subject to the background height and font size of the selected text.|
| INLINE | Inline input style. The background height of the selected text is the same as the height of the text box. |
## ImageSmoothingQuality<sup>8+</sup>
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description |
| -------- | -------------- |
| low | Low quality.|
| medium | Medium quality.|
| high | High quality.|
## CanvasDirection<sup>8+</sup>
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description |
| -------- | -------------- |
| inherit | The text direction is inherited from the **\<Canvas>** component.|
| ltr | The text direction is from left to right.|
| rtl | The text direction is from right to left.|
| [fillStyle](#fillstyle) | string \|number<sup>10+</sup>\|[CanvasGradient](ts-components-canvas-canvasgradient.md)\|[CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Style to fill an area.<br>- When the type is string, this attribute indicates the color of the fill area.<br>Default value: **'black'**<br>- When the type is number, this attribute indicates the color of the fill area.<br>Default value: **'#000000'**<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.<br>Since API version 9, this API is supported in ArkTS widgets.|
| [fillStyle](#fillstyle) | string \| number<sup>10+</sup>\|[CanvasGradient](ts-components-canvas-canvasgradient.md)\|[CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Style to fill an area.<br>- When the type is string, this attribute indicates the color of the fill area.<br>Default value: **'black'**<br>- When the type is number, this attribute indicates the color of the fill area.<br>Default value: **'#000000'**<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.<br>Since API version 9, this API is supported in ArkTS widgets.|
| [lineWidth](#linewidth) | number | Line width.<br>Default value: **1(px)** |
| [strokeStyle](#strokestyle) | string \|number<sup>10+</sup>\|[CanvasGradient](ts-components-canvas-canvasgradient.md)\|[CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Stroke style.<br>- When the type is string, this attribute indicates the stroke color.<br>Default value: **'black'**<br>- When the type is number, this attribute indicates the stroke color.<br>Default value: **'#000000'**<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.<br>Since API version 9, this API is supported in ArkTS widgets.|
| [strokeStyle](#strokestyle) | string \| number<sup>10+</sup>\|[CanvasGradient](ts-components-canvas-canvasgradient.md)\|[CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Stroke style.<br>- When the type is string, this attribute indicates the stroke color.<br>Default value: **'black'**<br>- When the type is number, this attribute indicates the stroke color.<br>Default value: **'#000000'**<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.<br>Since API version 9, this API is supported in ArkTS widgets.|
| [lineCap](#linecap) | CanvasLineCap | Style of the line endpoints. The options are as follows:<br>- **'butt'**: The endpoints of the line are squared off.<br>- **'round'**: The endpoints of the line are rounded.<br>- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness.<br>Default value: **'butt'**<br>Since API version 9, this API is supported in ArkTS widgets.|
| [lineJoin](#linejoin) | CanvasLineJoin | Style of the shape used to join line segments. The options are as follows:<br>- **'round'**: The shape used to join line segments is a sector, whose radius at the rounded corner is equal to the line width.<br>- **'bevel'**: The shape used to join line segments is a triangle. The rectangular corner of each line is independent.<br>- **'miter'**: The shape used to join line segments has a mitered corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.<br>Default value: **'miter'**<br>Since API version 9, this API is supported in ArkTS widgets.|
| [miterLimit](#miterlimit) | number | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.<br>Default value: **10**<br>Since API version 9, this API is supported in ArkTS widgets.|
...
...
@@ -59,8 +59,8 @@ Since API version 9, this API is supported in ArkTS widgets.
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.<br>Default value: **true**<br>Since API version 9, this API is supported in ArkTS widgets.|
| [height](#height) | number | Component height.<br>Unit: vp<br>Since API version 9, this API is supported in ArkTS widgets.|
| [width](#width) | number | Component width.<br>Unit: vp<br>Since API version 9, this API is supported in ArkTS widgets.|
| [imageSmoothingQuality](#imagesmoothingquality) |[ImageSmoothingQuality](ts-appendix-enums.md#imagesmoothingquality8) | Quality of image smoothing. This attribute works only when **imageSmoothingEnabled** is set to **true**.<br>Default value: **ImageSmoothingQuality.low**<br>Since API version 9, this API is supported in ArkTS widgets.|
| [direction](#direction) | [CanvasDirection](ts-appendix-enums.md#canvasdirection8) | Text direction used for drawing text.<br>Default value: **CanvasDirection.inherit**<br>Since API version 9, this API is supported in ArkTS widgets.|
| [imageSmoothingQuality](#imagesmoothingquality) |[ImageSmoothingQuality](#imagesmoothingquality-1) | Quality of image smoothing. This attribute works only when **imageSmoothingEnabled** is set to **true**.<br>Default value: **ImageSmoothingQuality.low**<br>Since API version 9, this API is supported in ArkTS widgets.|
| [direction](#direction) | [CanvasDirection](#canvasdirection) | Text direction used for drawing text.<br>Default value: **CanvasDirection.inherit**<br>Since API version 9, this API is supported in ArkTS widgets.|
| [filter](#filter) | string | Filter effect. Available values are as follows:<br>- **'none'**: no filter effect.<br>- **'blur'**: applies the Gaussian blur for the image.<br>- **'brightness'**: applies a linear multiplication to the image to make it look brighter or darker.<br>- **'contrast'**: adjusts the image contrast.<br>- **'grayscale'**: converts the image to a grayscale image.<br>- **'hue-rotate'**: applies hue rotation to the image.<br>- **'invert'**: inverts the input image.<br>- **'opacity'**: sets the opacity of the image.<br>- **'saturate'**: sets the saturation of the image.<br>- **'sepia'**: converts the image to dark brown.<br>Default value: **'none'**<br>Since API version 9, this API is supported in ArkTS widgets.|
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description |
| -------- | -------------- |
| inherit | The text direction is inherited from the **\<Canvas>** component.|
| ltr | The text direction is from left to right.|
| rtl | The text direction is from right to left.|
## CanvasFillRule
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description |
| -------- | -------------- |
| evenodd | The inside part of a shape is determined based on whether the counting result is an odd number or not.|
| nonzero | The inside part of a shape is determined based on whether the counting result is zero or not.|
## CanvasLineCap
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description |
| -------- | -------------- |
| butt | The ends of the line are squared off, and the line does not extend beyond its two endpoints. |
| round | The line is extended at the endpoints by a half circle whose diameter is equal to the line width. |
| square | The line is extended at the endpoints by a rectangle whose width is equal to half the line width and height equal to the line width.|
## CanvasLineJoin
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description |
| -------- | -------------- |
| bevel | The intersection is a triangle. The rectangular corner of each line is independent.|
| miter | The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.|
| round | The intersection is a sector, whose radius at the rounded corner is equal to the line width.|
## CanvasTextAlign
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description |
| -------- | -------------- |
| center | The text is center-aligned.|
| start | The text is aligned with the start bound.|
| end | The text is aligned with the end bound.|
| left | The text is left-aligned.|
| right | The text is right-aligned.|
## CanvasTextBaseline
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description |
| -------- | -------------- |
| alphabetic | The text baseline is the normal alphabetic baseline.|
| bottom | The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.|
| hanging | The text baseline is a hanging baseline over the text.|
| ideographic | The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excessive character.|
| middle | The text baseline is in the middle of the text bounding box.|
| top | The text baseline is on the top of the text bounding box.|
## ImageSmoothingQuality
Since API version 9, this API is supported in ArkTS widgets.
