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. When this event is triggered, the width and height of the canvas can be obtained, and you can use the canvas APIs to draw images.<br>Since API version 9, this API is supported in ArkTS widgets.| 36 37 38**Example** 39 40```ts 41// xxx.ets 42@Entry 43@Component 44struct CanvasExample { 45 private settings: RenderingContextSettings = new RenderingContextSettings(true) 46 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 47 48 build() { 49 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 50 Canvas(this.context) 51 .width('100%') 52 .height('100%') 53 .backgroundColor('#ffff00') 54 .onReady(() => { 55 this.context.fillRect(0, 30, 100, 100) 56 }) 57 } 58 .width('100%') 59 .height('100%') 60 } 61} 62``` 63  64
