1# OffscreenCanvas
2
3>  **NOTE**
4>
5>  The APIs of this component are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
6
7
8**OffscreenCanvas** defines a canvas object that can be rendered off the screen.
9
10
11## Attributes
12
13| Name    | Type    | Description                         |
14| ------ | ------ | --------------------------- |
15| width  | number | Width of the **OffscreenCanvas** object.|
16| height | number | Height of the **OffscreenCanvas** object.|
17
18
19## Methods
20
21
22### getContext
23
24getContext(type: string, options?: CanvasRenderingContext2DSettings): OffscreenCanvasRenderingContext2D
25
26Obtains the **OffscreenCanvas** context. This API returns a 2D drawing object.
27
28**Parameters**
29
30| Name      | Type                                    | Mandatory  | Description                    |
31| --------- | ---------------------------------------- | ---- | ---------------------- |
32| contextId | string                                   | Yes   | Context ID. The value can only be **"2d"**.        |
33| options   | [CanvasRenderingContext2DSettings](#canvasrenderingcontext2dsettings) | No   | Whether to enable anti-aliasing. By default, anti-aliasing is disabled.|
34
35**Return value**
36
37| Type                                      | Description                         |
38| ---------------------------------------- | --------------------------- |
39| [OffscreenCanvasRenderingContext2D](js-offscreencanvasrenderingcontext2d.md) | 2D drawing object, which can be used to draw rectangles, images, and texts, on the **OffscreenCanvas**.|
40
41### CanvasRenderingContext2DSettings
42
43CanvasRenderingContext2DSettings(antialias?: boolean)
44
45Configures the settings of an **OffscreenCanvasRenderingContext2D** object, including whether to enable antialiasing.
46
47| Name      | Type     | Description                 |
48| --------- | ------- | ------------------- |
49| antialias | boolean | Whether to enable anti-aliasing. The default value is **false**.|
50
51### toDataURL
52
53toDataURL(type?: string, quality?:number): string
54
55Generates a URL containing image display information.
56
57**Parameters**
58
59| Name    | Type  | Mandatory  | Description                                      |
60| ------- | ------ | ---- | ---------------------------------------- |
61| type    | string | No   | Image format. The default value is **image/png**.           |
62| 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.|
63
64**Return value**
65
66| Type    | Description       |
67| ------ | --------- |
68| string | Image URL.|
69
70
71### transferToImageBitmap
72
73transferToImageBitmap(): ImageBitmap
74
75Creates an **ImageBitmap** object on the most recently rendered image of the **OffscreenCanvas**.
76
77**Return value**
78
79| Type                                      | Description             |
80| ---------------------------------------- | --------------- |
81| [ImageBitmap](js-components-canvas-imagebitmap.md) | Pixel data rendered on the **OffscreenCanvas**.|
82
83
84## Example
85
86```html
87<!-- xxx.hml -->
88<div>
89  <canvas ref="canvasId" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
90</div>
91```
92
93```js
94//xxx.js
95export default {
96  onShow() {
97    var canvas = this.$refs.canvasId.getContext('2d');
98    var offscreen = new OffscreenCanvas(500,500);
99    var offscreenCanvasCtx = offscreen.getContext("2d");
100
101    // ... some drawing for the canvas using the offscreenCanvasCtx ...
102
103    var dataURL = offscreen.toDataURL();
104    console.log(dataURL); //data:image/png;base64,xxxxxx
105
106    var bitmap = offscreen.transferToImageBitmap();
107    canvas.transferFromImageBitmap(bitmap);
108  }
109}
110```
111