OffscreenCanvas

NOTE

The APIs of this component are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

OffscreenCanvas defines a canvas object that can be rendered off the screen.

Attributes

Name	Type	Description
width	number	Width of the OffscreenCanvas object.
height	number	Height of the OffscreenCanvas object.

Methods

getContext

getContext(type: string, options?: CanvasRenderingContext2DSettings): OffscreenCanvasRenderingContext2D

Obtains the OffscreenCanvas context. This API returns a 2D drawing object.

Parameters

Name	Type	Mandatory	Description
contextId	string	Yes	Context ID. The value can only be "2d".
options	CanvasRenderingContext2DSettings	No	2D drawing object, which can be used to draw rectangles, images, and texts, on the OffscreenCanvas.

Return value

Type	Description
OffscreenCanvasRenderingContext2D	2D drawing object, which can be used to draw rectangles, images, and texts, on the OffscreenCanvas.

toDataURL

toDataURL(type?: string, quality?:number):

Generates a URL containing image display information.

Parameters

Name	Type	Mandatory	Description
type	string	No	Image format. The default value is image/png.
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.

Return value

Type	Description
string	Image URL.

transferToImageBitmap

transferToImageBitmap(): ImageBitmap

Creates an ImageBitmap object on the most recently rendered image of the OffscreenCanvas.

Return value

Type	Description
ImageBitmap	Pixel data rendered on the OffscreenCanvas.

Example

<!-- xxx.hml -->
<div>
  <canvas ref="canvasId" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    var canvas = this.$refs.canvasId.getContext('2d');
    var offscreen = new OffscreenCanvas(500,500);
    var offscreenCanvasCtx = offscreen.getContext("2d");

    // ... some drawing for the canvas using the offscreenCanvasCtx ...

    var dataURL = offscreen.toDataURL();
    console.log(dataURL); //data:image/png;base64,xxxxxx

    var bitmap = offscreen.transferToImageBitmap();
    canvas.transferFromImageBitmap(bitmap);
  }
}