Class Text

Represents an image texture

Hierarchy

Constructors

constructor

Properties

align backgroundStyleString baseline fillStyleString font gl height id strokeStyleString strokeWidth text textCanvas texture width

Methods

imageLoaded imageNotFound load setFullImageData setMagFilter setMinFilter setSubImageData setWrapping updateTextureImage

Constructors

constructor

  • new Text(text: string, width: number, height: number, font?: string, fillStyle?: string | Color, backgroundStyle?: string | Color, strokeStyle?: string | Color, strokeWidth?: number, align?: CanvasTextAlign, baseline?: CanvasTextBaseline): Text

  • Constructor for Text class. The text is rendered using the browser's canvas element and then copyied into a texture, so the parameters are based on what is understood by CanvasRenderingContext2D. Shortcuts are provided for fillStyle, backgroundStyle, and strokeStyle to use the gfx.Color types if that is more convenient for your application.

    Parameters

    • text: string

      The text to be rendered

    • width: number

      The width of the text canvas

    • height: number

      The height of the text canvas

    • font: string = '24px monospace'

      The font style of the text. Can be a gfx.Color or see additional options for canvas.font.

    • fillStyle: string | Color = 'black'

      The fill style of the text. Can be a gfx.Color or see additional options for canvas.fillStyle.

    • backgroundStyle: string | Color = ''

      The fill style of the background. Can be a gfx.Color or see additional options for canvas.fillStyle.

    • strokeStyle: string | Color = ''

      The stroke style of the text. Can be a gfx.Color or see additional options for canvas.strokeStyle.

    • strokeWidth: number = 1

      The stroke width of the text.

    • align: CanvasTextAlign = 'center'

      The alignment of the text. See possible values in canvas.textAlign

    • baseline: CanvasTextBaseline = 'middle'

      The baseline of the text. See possible values in canvas.textBaseline.

    Returns Text

Properties

align

align: CanvasTextAlign

backgroundStyleString

backgroundStyleString: string

baseline

baseline: CanvasTextBaseline

fillStyleString

fillStyleString: string

font

font: string

Protected Readonly gl

gl: WebGL2RenderingContext

height

height: number

The height of the original (non-mipmapped) texture image data or 'undefined' if the image has not yet completed loading.

id

id: number

The WebGL texture ID used to draw this texture

strokeStyleString

strokeStyleString: string

strokeWidth

strokeWidth: number

text

text: string

Private textCanvas

textCanvas: null | CanvasRenderingContext2D

texture

texture: null | WebGLTexture

The internal object used by WebGL to draw this texture

width

width: number

The width of the original (non-mipmapped) texture image data or 'undefined' if the image has not yet completed loading.

Methods

imageLoaded

  • Callback function for image loaded events

    Parameters

    • image: HTMLImageElement

      HTML DOM image element produced by loading the image texture

    • url: string

      Original URL the image was loaded from (used as an internal identifier for the image asset)

    Returns void

imageNotFound

  • Callback function for when the requested image cannot be found (load error)

    Parameters

    • url: string

      Original URL the image was loaded from (used as an internal identifier for the errored image asset)

    Returns void

load

setFullImageData

  • Copies the pixel data from an ImageData source into the texture

    Parameters

    • imageData: ImageData

      An ImageData object with the same width and height as the texture

    Returns void

setMagFilter

  • Control the magnification filter (sampling if a texture is shown at greater than its original size)

    Parameters

    • linear: boolean

      Use linear filtering

    Returns void

setMinFilter

  • Control the minification filter (sampling if a texture is shown at less than its original size)

    Parameters

    • linear: boolean

      Use linear filtering

    • mipmap: boolean

      Use mipmapping

    Returns void

setSubImageData

  • Copies the pixel data from an ImageData source into a portion of the texture, placing it as a sub-image within the texture

    Parameters

    • imageData: ImageData

      An ImageData object with width and height that are the same size or smaller than the texture

    • xOffset: number

      An offset in the x-direction within the texture where the top-left corner of imageData should be placed

    • yOffset: number

      An offset in the y-direction within the texture where the top-left corner of imageData should be placed

    Returns void

setWrapping

  • Set the wrapping mode for the texture.

    Parameters

    • repeat: boolean

      Repeat the texture beyond its bounds or just show it once

    Returns void

updateTextureImage

  • Updates the texture image of the Text class

    Sets the width and height of the canvas, font, text alignment, and baseline. Fills the canvas with the background style if specified. Fills the text with the fill style if specified. Strokes the text with the stroke style and stroke width if specified. Binds the texture and generated mipmap.

    Returns void

Settings

Member Visibility

Theme

Generated using TypeDoc