1# DrawingRenderingContext
2
3**DrawingRenderingContext** provides a rendering context for drawing rectangles, text, images, and other objects on a canvas.
4
5> **NOTE**
6>
7> This feature is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10
11
12## Attributes
13
14| Name      | Type                                                        | Description                                                     |
15| ---------- | ------------------------------------------------------------ | --------------------------------------------------------- |
16| size       | {width: number, height: number}                              | Width and height of the context, in vp.                                           |
17| canvas     | [Canvas](../../apis-arkgraphics2d/js-apis-graphics-drawing.md#canvas) | **Canvas** object. For details, see [Canvas](../../apis-arkgraphics2d/js-apis-graphics-drawing.md#canvas).|
18| invalidate | void                                                         | Triggers re-rendering of the component.                             |
19
20**Example**
21
22This example shows how to use the APIs in **DrawingRenderingContext** for drawing.
23
24```ts
25// xxx.ets
26@Entry
27@Component
28struct CanvasExample {
29  private context: DrawingRenderingContext = new DrawingRenderingContext()
30
31  build() {
32    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
33      Canvas(this.context)
34        .width('100%')
35        .height('100%')
36        .backgroundColor('#ffff00')
37        .onReady(() => {
38          this.context.canvas.drawCircle(200, 200, 100)
39          this.context.invalidate()
40        })
41    }
42    .width('100%')
43    .height('100%')
44  }
45}
46```
47  ![en-us_image_0000001194032666](figures/canvas_drawingRenderingContext.png)
48