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**System capability**: SystemCapability.ArkUI.ArkUI.Full 36 37**Parameters** 38 39| Name | Type | Mandatory | Description | 40| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 41| 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). | 42| 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. | 43 44## Attributes 45 46In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 47 48### enableAnalyzer<sup>12+</sup> 49 50Specifies whether to enable the AI image analyzer. This attribute must be used together with [StartImageAnalyzer](ts-canvasrenderingcontext2d.md#startimageanalyzer12) and [StopImageAnalyzer](ts-canvasrenderingcontext2d.md#stopimageanalyzer12) in [context](ts-canvasrenderingcontext2d.md). 51This 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. 52 53**Atomic service API**: This API can be used in atomic services since API version 12. 54 55**System capability**: SystemCapability.ArkUI.ArkUI.Full 56 57**Parameters** 58 59| Name | Type | Mandatory | Description | 60| ------ | ------- | ---- | ------------------------------------------------------------ | 61| enable | boolean | Yes | Whether to enable the AI image analyzer. The value **true** means to enable the AI image analyzer.<br>Default value: **false** | 62 63## Events 64 65**Widget capability**: This API can be used in ArkTS widgets since API version 9. 66 67**Atomic service API**: This API can be used in atomic services since API version 11. 68 69**System capability**: SystemCapability.ArkUI.ArkUI.Full 70 71In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 72 73| Name | Description | 74| -------------------------- | ---------------------------------------- | 75| 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 the canvas is merely relocated, the **onAreaChange** event is triggered, but the **onReady** event is not.<br>The **onAreaChange** event is triggered after the **onReady** event. | 76 77**Example** 78 79This example describes how to use the methods in **CanvasRenderingContext2D** for drawing on a canvas. 80 81```ts 82// xxx.ets 83@Entry 84@Component 85struct CanvasExample { 86 private settings: RenderingContextSettings = new RenderingContextSettings(true) 87 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 88 89 build() { 90 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 91 Canvas(this.context) 92 .width('100%') 93 .height('100%') 94 .backgroundColor('#ffff00') 95 .onReady(() => { 96 this.context.fillRect(0, 30, 100, 100) 97 }) 98 } 99 .width('100%') 100 .height('100%') 101 } 102} 103``` 104  105 106 107This example describes how to use the methods in **DrawingRenderingContext** for drawing on a canvas. 108 109```ts 110// xxx.ets 111@Entry 112@Component 113struct CanvasExample { 114 private context: DrawingRenderingContext = new DrawingRenderingContext() 115 116 build() { 117 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 118 Canvas(this.context) 119 .width('100%') 120 .height('100%') 121 .backgroundColor('#ffff00') 122 .onReady(() => { 123 this.context.canvas.drawCircle(200, 200, 100) 124 this.context.invalidate() 125 }) 126 } 127 .width('100%') 128 .height('100%') 129 } 130} 131``` 132  133
