CanvasTexture

class CanvasTexture

Creates a Canvas Texture of the given size (when using WebGL, use invalidate to force a reupload of the corresponding texture)

Constructor


new CanvasTexture(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.

Summary


Properties from CanvasTexture

HTMLCanvasElement | OffscreenCanvas
canvas
CanvasRenderingContext2D
context
number
height
number
width

Public Properties


canvas canvas_texture.js:32
canvas: HTMLCanvasElement | OffscreenCanvas

HTMLCanvasElement | OffscreenCanvas

the canvas created for this CanvasTexture

context canvas_texture.js:38
context: CanvasRenderingContext2D

CanvasRenderingContext2D

the rendering context of this CanvasTexture

height canvas_texture.js:214
height: number

number

The height of this canvas texture in pixels

width canvas_texture.js:201
width: number

number

The width of this canvas texture in pixels

Public Methods


clear canvas_texture.js:56
clear() → {}

Clears the content of the canvas texture

getImageData canvas_texture.js:102
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 CanvasTexture.

invalidate canvas_texture.js:178
invalidate(renderer: CanvasRenderer | WebGLRenderer) → {}

invalidate the current CanvasTexture, 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 canvas_texture.js:92
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 canvas_texture.js:64
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 canvas_texture.js:121
toBlob(type: string, quality: number) → {Promise}

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

canvasTexture.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 canvas_texture.js:163
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 canvas_texture.js:141
toImageBitmap(type: string, quality: number) → {Promise}

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

canvasTexture.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!