# canvas The **** component is used for customizing drawings. ## Permission List None ## Child Component Not supported ## Attribute Attributes in [Universal Attributes](js-components-common-attributes.md) are supported. ## Style Styles in [Universal Styles](js-components-common-styles.md) are supported. ## Event Events in [Universal Events](js-components-common-events.md) are supported. ## Method In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported.

Name	Parameter	Description
getContext	getContext ( type: '2d', attributes⁶⁺: { antialias: boolean } ) => CanvasRendering2dContext	Obtains the canvas drawing context. The invoking methods are as follows⁶⁺: var ctx = canvas.getContext(contextType); var ctx = canvas.getContext(contextType, contextAttributes); contextType is mandatory and can be set to 2d. contextAttributes is optional and can be set only to enable or disable the anti-aliasing function. By default, the anti-aliasing function is disabled. The contextType objects are as follows: 2d: The return value is a 2D drawing object that provides specific 2D drawing operations. For details, see section CanvasRenderingContext2D. This API cannot be called in onInit or onReady.
toDataURL⁶⁺	string type, number encoderOptions	Generate a URL containing the image display. type: specifies the image format. This parameter is optional. The default format is image/png. encoderOptions: When the image format is set to image/jpeg or image/webp, the image quality can be selected from 0 to 1. If the value of this parameter is beyond the value range, the default value 0.92 is used.

Name

Parameter

Description

getContext

getContext ( type: '2d', attributes⁶⁺: { antialias: boolean } ) => CanvasRendering2dContext

Obtains the canvas drawing context. The invoking methods are as follows⁶⁺:

var ctx = canvas.getContext(contextType);

var ctx = canvas.getContext(contextType, contextAttributes);

contextType is mandatory and can be set to 2d. contextAttributes is optional and can be set only to enable or disable the anti-aliasing function. By default, the anti-aliasing function is disabled.

The contextType objects are as follows:

2d: The return value is a 2D drawing object that provides specific 2D drawing operations. For details, see section CanvasRenderingContext2D.

This API cannot be called in onInit or onReady.

toDataURL⁶⁺

string type, number encoderOptions

Generate a URL containing the image display.

type: specifies the image format. This parameter is optional. The default format is image/png.
encoderOptions: When the image format is set to image/jpeg or image/webp, the image quality can be selected from 0 to 1. If the value of this parameter is beyond the value range, the default value 0.92 is used.

## Example ```

``` ``` // xxx.js export default { handleClick() { const el = this.$refs.canvas1; var dataURL = el.toDataURL(); console.log(dataURL); // "data:image/png;base64,xxxxxxxx..." } } ```