1#  Canvas
2
3The **Canvas** component can be used to customize drawings.
4
5> **NOTE**
6>
7>  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
8
9## Child Components
10
11Not supported
12
13## APIs
14
15### Canvas
16
17Canvas(context?: CanvasRenderingContext2D | DrawingRenderingContext)
18
19**Widget capability**: This API can be used in ArkTS widgets since API version 9.
20
21**Atomic service API**: This API can be used in atomic services since API version 11.
22
23**System capability**: SystemCapability.ArkUI.ArkUI.Full
24
25**Parameters**
26
27| Name | Type   | Mandatory| Description  |
28| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
29| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) \| [DrawingRenderingContext<sup>12+</sup>](ts-drawingrenderingcontext.md) | No  | 2D rendering context for a canvas.<br>**CanvasRenderingContext2D**: Canvases cannot share one **CanvasRenderingContext2D** object. For details, see [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md). **DrawingRenderingContext**: Canvases cannot share one **DrawingRenderingContext** object. For details, see [DrawingRenderingContext](ts-drawingrenderingcontext.md).|
30
31### Canvas<sup>12+</sup>
32
33Canvas(context: CanvasRenderingContext2D | DrawingRenderingContext, imageAIOptions: ImageAIOptions)
34
35**Atomic service API**: This API can be used in atomic services since API version 12.
36
37**System capability**: SystemCapability.ArkUI.ArkUI.Full
38
39**Parameters**
40
41| Name | Type | Mandatory| Description|
42| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
43| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) \| [DrawingRenderingContext<sup>12+</sup>](ts-drawingrenderingcontext.md) | Yes  | 2D rendering context for a canvas.<br>**CanvasRenderingContext2D**: Canvases cannot share one **CanvasRenderingContext2D** object. For details, see [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md). **DrawingRenderingContext**: Canvases cannot share one **DrawingRenderingContext** object. For details, see [DrawingRenderingContext](ts-drawingrenderingcontext.md).|
44| imageAIOptions  | [ImageAIOptions](ts-image-common.md#imageaioptions) | Yes  | AI image analysis options. You can configure the analysis type or bind an analyzer controller through this parameter.|
45
46## Attributes
47
48In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
49
50### enableAnalyzer<sup>12+</sup>
51
52Sets whether to enable the AI analyzer, which supports subject recognition, text recognition, and object lookup.
53For the settings to take effect, this attribute must be used together with [StartImageAnalyzer](ts-canvasrenderingcontext2d.md#startimageanalyzer12) and [StopImageAnalyzer](ts-canvasrenderingcontext2d.md#stopimageanalyzer12) of [context](ts-canvasrenderingcontext2d.md).
54This attribute cannot be used together with the [overlay](ts-universal-attributes-overlay.md#overlay) attribute. If they are set at the same time, the **CustomBuilder** attribute in **overlay** has no effect. This feature depends on device capabilities.
55
56**Atomic service API**: This API can be used in atomic services since API version 12.
57
58**System capability**: SystemCapability.ArkUI.ArkUI.Full
59
60**Parameters**
61
62| Name| Type   | Mandatory| Description|
63| ------ | ------- | ---- | ------------------------------------------------------------ |
64| enable  | boolean | Yes  | Whether to enable the AI analyzer. The value **true** means to enable the AI analyzer.<br>Default value: **false**|
65
66## Events
67
68**Widget capability**: This API can be used in ArkTS widgets since API version 9.
69
70**Atomic service API**: This API can be used in atomic services since API version 11.
71
72**System capability**: SystemCapability.ArkUI.ArkUI.Full
73
74In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
75
76| Name                        | Description                                      |
77| -------------------------- | ---------------------------------------- |
78| onReady(event: () => void) | Triggered when a canvas is ready or its size changes. When this event is triggered, the canvas is cleared. The width and height of the canvas can then be obtained, and you can use the canvas APIs to draw images. If only the position of the canvas changes, only the [onAreaChange](ts-universal-component-area-change-event.md#onAreaChange) event is triggered, not the **onReady** event.<br>The [onAreaChange](ts-universal-component-area-change-event.md#onAreaChange) event is triggered after the **onReady** event.|
79
80**Example**
81
82This example describes how to use the methods in **CanvasRenderingContext2D** for drawing on a canvas.
83
84```ts
85// xxx.ets
86@Entry
87@Component
88struct CanvasExample {
89  private settings: RenderingContextSettings = new RenderingContextSettings(true)
90  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
91
92  build() {
93    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
94      Canvas(this.context)
95        .width('100%')
96        .height('100%')
97        .backgroundColor('#ffff00')
98        .onReady(() => {
99          this.context.fillRect(0, 30, 100, 100)
100        })
101    }
102    .width('100%')
103    .height('100%')
104  }
105}
106```
107  ![en-us_image_0000001194032666](figures/en-us_image_0000001194032666.png)
108
109
110This example describes how to use the methods in **DrawingRenderingContext** for drawing on a canvas.
111
112```ts
113// xxx.ets
114@Entry
115@Component
116struct CanvasExample {
117  private context: DrawingRenderingContext = new DrawingRenderingContext()
118
119  build() {
120    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
121      Canvas(this.context)
122        .width('100%')
123        .height('100%')
124        .backgroundColor('#ffff00')
125        .onReady(() => {
126          this.context.canvas.drawCircle(200, 200, 100)
127          this.context.invalidate()
128        })
129    }
130    .width('100%')
131    .height('100%')
132  }
133}
134```
135  ![en-us_image_0000001194032666](figures/canvas_drawingRenderingContext.png)
136