CanvasRenderTarget

class CanvasRenderTarget

CanvasRenderTarget is 2D render target which exposes a Canvas interface.

Constructor


new CanvasRenderTarget(width: number, height: number, attributes: object) → {}
Parameters:
Name Type Attributes Default Description
width number

the desired width of the canvas

height number

the desired height of the canvas

attributes object

The attributes to create both the canvas and context

attributes.context boolean

<optional>

"2d"

the context type to be created ("2d", "webgl", "webgl2")

attributes.offscreenCanvas boolean

<optional>

false

will create an offscreenCanvas if true instead of a standard canvas

attributes.willReadFrequently boolean

<optional>

false

Indicates whether or not a lot of read-back operations are planned

attributes.antiAlias boolean

<optional>

false

Whether to enable anti-aliasing, use false (default) for a pixelated effect.

Public Properties


height canvasrendertarget.js:283
height: number

number

The height of this canvas texture in pixels

width canvasrendertarget.js:270
width: number

number

The width of this canvas texture in pixels

Public Methods


clear canvasrendertarget.js:125
clear() → {}

Clears the content of the canvas texture

getImageData canvasrendertarget.js:171
getImageData(x: number, y: number, width: number, height: number) → {ImageData}

Returns an ImageData object representing the underlying pixel data for a specified portion of this canvas texture. (Note: when using getImageData(), it is highly recommended to use the willReadFrequently attribute when creatimg the corresponding canvas texture)

Parameters:
Name Type Description
x number

The x-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted

y number

The y-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted

width number

The width of the rectangle from which the ImageData will be extracted. Positive values are to the right, and negative to the left

height number

The height of the rectangle from which the ImageData will be extracted. Positive values are down, and negative are up

Returns:
Type Description
ImageData

The ImageData extracted from this CanvasRenderTarget.

invalidate canvasrendertarget.js:247
invalidate(renderer: CanvasRenderer | WebGLRenderer) → {}

invalidate the current CanvasRenderTarget, and force a reupload of the corresponding texture (call this if you modify the canvas content between two draw calls)

Parameters:
Name Type Description
renderer CanvasRenderer | WebGLRenderer

the renderer to which this canvas texture is attached

resize canvasrendertarget.js:161
resize(width: number, height: number) → {}

Resizes the canvas texture to the given width and height.

Parameters:
Name Type Description
width number

the desired width

height number

the desired height

setAntiAlias canvasrendertarget.js:133
setAntiAlias(enable: boolean) → {}

enable/disable image smoothing (scaling interpolation)

Parameters:
Name Type Attributes Default Description
enable boolean

<optional>

false

whether to enable or not image smoothing (scaling interpolation)

toBlob canvasrendertarget.js:190
toBlob(type: string, quality: number) → {Promise}

creates a Blob object representing the image contained in this canvas texture

renderTarget.convertToBlob().then((blob) => console.log(blob));
Parameters:
Name Type Attributes Default Description
type string

<optional>

"image/png"

A string indicating the image format

quality number

<optional>

A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.

Returns:
Type Description
Promise

A Promise returning a Blob object representing the image contained in this canvas texture

toDataURL canvasrendertarget.js:232
toDataURL(type: string, quality: number) → {Promise}

returns a data URL containing a representation of the most recently rendered image of this canvas texture (not supported by OffscreenCanvas)

renderer.toDataURL().then((dataURL) => console.log(dataURL));
Parameters:
Name Type Attributes Default Description
type string

<optional>

"image/png"

A string indicating the image format

quality number

<optional>

A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.

Returns:
Type Description
Promise

A Promise returning a string containing the requested data URL.

toImageBitmap canvasrendertarget.js:210
toImageBitmap(type: string, quality: number) → {Promise}

creates an ImageBitmap object from the most recently rendered image of this canvas texture

renderTarget.transferToImageBitmap().then((bitmap) => console.log(bitmap));
Parameters:
Name Type Attributes Default Description
type string

<optional>

"image/png"

A string indicating the image format

quality number

<optional>

A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.

Returns:
Type Description
Promise

A Promise returning an ImageBitmap.


Powered by webdoc!