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 15Canvas(context?: CanvasRenderingContext2D) 16 17Since API version 9, this API is supported in ArkTS widgets. 18 19**Parameters** 20 21| Name | Type | Mandatory | Default Value | Description | 22| ------- | ---------------------------------------- | ---- | ---- | ---------------------------- | 23| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | No | - | For details, see **CanvasRenderingContext2D**.| 24 25## Attributes 26 27The [universal attributes](ts-universal-attributes-size.md) are supported. 28 29## Events 30 31In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 32 33| Name | Parameter | Description | 34| ----------------------------- | ---- | -------------------- | 35| 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>Since API version 9, this API is supported in ArkTS widgets.| 36 37**Example** 38 39```ts 40// xxx.ets 41@Entry 42@Component 43struct CanvasExample { 44 private settings: RenderingContextSettings = new RenderingContextSettings(true) 45 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 46 47 build() { 48 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 49 Canvas(this.context) 50 .width('100%') 51 .height('100%') 52 .backgroundColor('#ffff00') 53 .onReady(() => { 54 this.context.fillRect(0, 30, 100, 100) 55 }) 56 } 57 .width('100%') 58 .height('100%') 59 } 60} 61``` 62  63
