1# canvas
2
3>  **NOTE**
4>
5>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
6
7The **\<canvas>** component is used for customizing drawings.
8
9## Required Permissions
10
11None
12
13
14## Child Components
15
16Not supported
17
18
19## Attributes
20
21The [universal attributes](js-components-common-attributes.md) are supported.
22
23
24## Styles
25
26The [universal styles](js-components-common-styles.md) are supported.
27
28
29## Events
30
31The [universal events](js-components-common-events.md) are supported.
32
33
34## Methods
35
36In addition to the [universal methods](js-components-common-methods.md), the following methods are supported.
37
38
39### getContext
40
41getContext(type: '2d', options?:  ContextAttrOptions): CanvasRenderingContext2D
42
43Obtains the canvas drawing context. This API cannot be called in **onInit** or **onReady**.
44
45**Parameters**
46
47| Name                 | Type              | Mandatory  | Description                                      |
48| -------------------- | ------------------ | ---- | ---------------------------------------- |
49| type                 | string             | Yes   | Object type. The value is set to **'2d'**, indicating that a 2D drawing object is returned. This object can be used to draw rectangles, texts, and images on the canvas component.|
50| options<sup>6+</sup> | ContextAttrOptions | No   | Whether to enable anti-aliasing. By default, anti-aliasing is disabled.                 |
51
52  **Table 1** ContextAttrOptions
53
54| Name      | Type     | Description                 |
55| --------- | ------- | ------------------- |
56| antialias | boolean | Whether to enable anti-aliasing. The default value is **false**.|
57
58**Return value**
59
60| Type                                      | Description                  |
61| ---------------------------------------- | -------------------- |
62| [CanvasRenderingContext2D](js-components-canvas-canvasrenderingcontext2d.md) | 2D drawing object, which can be used to draw rectangles, images, and texts on the canvas component.|
63
64### toDataURL<sup>6+</sup>
65
66toDataURL(type?: string, quality?: number): string
67
68Generates a URL containing image display information.
69
70**Parameters**
71
72| Name    | Type  | Mandatory  | Description                                      |
73| ------- | ------ | ---- | ---------------------------------------- |
74| type    | string | No   | Image format. The default value is **image/png**.           |
75| quality | number | No   | Image quality, which ranges from 0 to 1, when the image format is **image/jpeg** or **image/webp**. If the set value is beyond the value range, the default value **0.92** is used.|
76
77**Return value**
78
79| Type    | Description       |
80| ------ | --------- |
81| string | Image URL.|
82
83## Example
84
85```html
86<!-- xxx.hml -->
87<div>
88  <canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
89  <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
90</div>
91```
92
93```js
94// xxx.js
95export default {
96  handleClick() {
97    const el = this.$refs.canvas1;
98    var dataURL = el.toDataURL();
99    console.log(dataURL);
100    // "data:image/png;base64,xxxxxxxx..."
101  }
102}
103```
104