# Canvas >![](../../public_sys-resources/icon-note.gif) **说明：** >该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。提供画布组件，用于自定义绘制图形。 ## 权限列表无 ## 子组件不支持。 ## 接口 Canvas\(context: CanvasRenderingContext2D\) - 参数

参数名	参数类型	必填	默认值	参数描述
context	CanvasRenderingContext2D	是	-	见CanvasRenderingContext2D对象。

## 属性支持[通用属性](ts-universal-attributes-size.md)。 ## 事件除支持[通用事件](ts-universal-events-click.md)外，还支持如下事件：

名称	参数	描述
onReady(callback: () => void)	无	画布组件的事件回调，可以在此时进行绘制。

## 示例 ``` @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%') } } ```