ts-components-canvas-canvas.md

# Canvas


> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.


The **<Canvas>** component can be used to customize drawings.


## Required Permissions

None


## Child Components

None


## APIs

Canvas(context: CanvasRenderingContext2D)

- Parameters
    | Name | Type | Mandatory | Default Value | Description |
  | -------- | -------- | -------- | -------- | -------- |
  | context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | Yes | - | For details, see CanvasRenderingContext2D. |


## Attributes

[Universal attributes](ts-universal-attributes-size.md) are supported.


## Events

In addition to [universal events](ts-universal-events-click.md), the following events are supported.

  | Name | Parameter | Description | 
| -------- | -------- | -------- |
| onReady(callback: () => void) | None | Triggered when . | 


## Example


```
@Entry
@Component
struct CanvasExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context.fillRect(0,30,100,100)
        })
    }
    .width('100%')
    .height('100%')
  }
}
```