Class CanvasRenderTarget

constructor

• new CanvasRenderTarget(width, height, attributes?): CanvasRenderTarget

• Parameters

  • width: number

    the desired width of the canvas
  • height: number

    the desired height of the canvas
  • attributes: {
        antiAlias: undefined | boolean;
        context: undefined | string;
        offscreenCanvas: undefined | boolean;
        preferWebGL1: undefined | boolean;
        transparent: undefined | boolean;
        willReadFrequently: undefined | boolean;
    } = defaultAttributes

    The attributes to create both the canvas and context

    • antiAlias: undefined | boolean

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

    • context: undefined | string

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

    • offscreenCanvas: undefined | boolean

      will create an offscreenCanvas if true instead of a standard canvas

    • preferWebGL1: undefined | boolean

      set to true for force using WebGL1 instead of WebGL2 (if supported)

    • transparent: undefined | boolean

      specify if the canvas contains an alpha channel

    • willReadFrequently: undefined | boolean

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

  Returns CanvasRenderTarget

WebGLVersion

attributes

canvas

context

glTextureUnit

height

• get height(): number

• The height of this canvas texture in pixels

  Returns number
• set height(val): void

• Parameters

  • val: number

  Returns void

width

• get width(): number

• The width of this canvas texture in pixels

  Returns number
• set width(val): void

• Parameters

  • val: number

  Returns void

clear

• clear(): void

• Clears the content of the canvas texture

  Returns void

getImageData

• getImageData(x, y, width, height): 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

  • 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 ImageData

  The ImageData extracted from this CanvasRenderTarget.

invalidate

• invalidate(renderer): void

• 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

  • renderer: CanvasRenderer | WebGLRenderer

    the renderer to which this canvas texture is attached

  Returns void

resize

• resize(width, height): void

• Resizes the canvas texture to the given width and height.

  Parameters

  • width: number

    the desired width
  • height: number

    the desired height

  Returns void

setAntiAlias

• setAntiAlias(enable?): void

• enable/disable image smoothing (scaling interpolation)

  Parameters

  • Optionalenable: boolean = false

    whether to enable or not image smoothing (scaling interpolation)

  Returns void

toBlob

• toBlob(type?, quality?): Promise<any>

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

  Parameters

  • Optionaltype: string = "image/png"

    A string indicating the image format
  • Optionalquality: number

    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 Promise<any>

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

  Example

  renderTarget.convertToBlob().then((blob) => console.log(blob));
  Copy

toDataURL

• toDataURL(type?, quality?): Promise<any>

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

  Parameters

  • Optionaltype: string = "image/png"

    A string indicating the image format
  • Optionalquality: number

    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 Promise<any>

  A Promise returning a string containing the requested data URL.

  Example

  renderer.toDataURL().then((dataURL) => console.log(dataURL));
  Copy

toImageBitmap

• toImageBitmap(type?, quality?): Promise<any>

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

  Parameters

  • Optionaltype: string = "image/png"

    A string indicating the image format
  • Optionalquality: number

    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 Promise<any>

  A Promise returning an ImageBitmap.

  Example

  renderTarget.transferToImageBitmap().then((bitmap) => console.log(bitmap));
  Copy