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-component-general-attributes.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 [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md#canvasrenderingcontext2d). 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 68In addition to the [universal events](ts-component-general-events.md), the following events are supported. 69 70### onReady 71 72onReady(event: VoidCallback) 73 74Triggered when the **Canvas** component is initialized or when its size changes. 75 76When this event is triggered, the canvas is cleared. The width and height of the **Canvas** component are then determined and can be obtained, allowing you to use APIs related to the **Canvas** component for drawing. 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. The [onAreaChange](ts-universal-component-area-change-event.md#onAreaChange) event is triggered after the **onReady** event. 77 78**Widget capability**: This API can be used in ArkTS widgets since API version 9. 79 80**Atomic service API**: This API can be used in atomic services since API version 11. 81 82**System capability**: SystemCapability.ArkUI.ArkUI.Full 83 84**Parameters** 85 86| Name| Type | Mandatory| Description| 87| ------ | ------- | ---- | ------------------------------------------------------------ | 88| event | [VoidCallback](ts-types.md#voidcallback12) | Yes | Callback event triggered when the **Canvas** component is initialized or when its size changes.| 89 90## Example 91 92### Example 1: Using APIs in CanvasRenderingContext2D 93 94This example describes how to use the APIs in **CanvasRenderingContext2D** for drawing on a canvas. 95 96```ts 97// xxx.ets 98@Entry 99@Component 100struct CanvasExample { 101 private settings: RenderingContextSettings = new RenderingContextSettings(true) 102 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 103 104 build() { 105 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 106 Canvas(this.context) 107 .width('100%') 108 .height('100%') 109 .backgroundColor('#ffff00') 110 .onReady(() => { 111 this.context.fillRect(0, 30, 100, 100) 112 }) 113 } 114 .width('100%') 115 .height('100%') 116 } 117} 118``` 119  120 121### Example 2: Using APIs in DrawingRenderingContext 122 123This example describes how to use the APIs in **DrawingRenderingContext** for drawing on a canvas. 124 125```ts 126// xxx.ets 127@Entry 128@Component 129struct CanvasExample { 130 private context: DrawingRenderingContext = new DrawingRenderingContext() 131 132 build() { 133 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 134 Canvas(this.context) 135 .width('100%') 136 .height('100%') 137 .backgroundColor('#ffff00') 138 .onReady(() => { 139 this.context.canvas.drawCircle(200, 200, 100) 140 this.context.invalidate() 141 }) 142 } 143 .width('100%') 144 .height('100%') 145 } 146} 147``` 148  149
