CanvasRenderTarget

class CanvasRenderTarget

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

Constructor

new CanvasRenderTarget(width: number, height: number, attributes: Settings) → {}

Parameters:
Name	Type	Attributes	Default	Description
width	number			the desired width of the canvas
height	number			the desired height of the canvas
attributes	Settings			The attributes to create both the canvas and context
attributes.context	boolean	<optional>	"2d"	the context type to be created ("2d", "webgl")
attributes.preferWebGL1	boolean	<optional>	false	set to true for force using WebGL1 instead of WebGL2 (if supported)
attributes.transparent	boolean	<optional>	false	specify if the canvas contains an alpha channel
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 CanvasRenderTarget

number

height

number

width

Methods from CanvasRenderTarget

	clear() Clears the content of the canvas texture
ImageData	getImageData(x: number, y: number, width: number, height: number)
	invalidate(renderer: CanvasRenderer \| WebGLRenderer)
	resize(width: number, height: number)
	setAntiAlias(enable: boolean)
Promise	toBlob(type: string, quality: number)
Promise	toDataURL(type: string, quality: number)
Promise	toImageBitmap(type: string, quality: number)

Public Properties

height canvasrendertarget.js:289

height: number

number

The height of this canvas texture in pixels

width canvasrendertarget.js:276

width: number

number

The width of this canvas texture in pixels

Public Methods

clear canvasrendertarget.js:131

clear() → {}

Clears the content of the canvas texture

getImageData canvasrendertarget.js:177

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:253

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:167

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:139

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:196

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:238

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:216

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.