Class Renderer

constructor

• new Renderer(options?: any): Renderer

  Parameters

  • Optionaloptions: any

    optional parameters for the renderer

  Returns Renderer

backgroundColor

black
Copy

currentColor

currentTint

depthTest

"sorting"
Copy

designRatio

isContextValid

true
Copy

path2D

projectionMatrix

renderTarget

scaleRatio

<1,1>
Copy

settings

type

uvOffset

height

• get height(): number

  return the height of the canvas which this renderer draws to

  Returns number

  height of the system Canvas

• set height(value: number): void

  Parameters

  • value: number

  Returns void

width

• get width(): number

  return the width of the canvas which this renderer draws to

  Returns number

  width of the system Canvas

• set width(value: number): void

  Parameters

  • value: number

  Returns void

clear

• clear(): void

  prepare the framebuffer for drawing a new frame

  Returns void

clearMask

• clearMask(): void

  disable (remove) the rendering mask set through setMask.

  Returns void

  See

  Renderer#setMask

clearTint

• clearTint(): void

  clear the rendering tint set through setTint.

  Returns void

  See

  Renderer#setTint

fill

• fill(shape: Bounds | Polygon | Rect | Ellipse | Line | RoundRect): void

  fill the given shape

  Parameters

  • shape: Bounds | Polygon | Rect | Ellipse | Line | RoundRect

    a shape object to fill

  Returns void

flush

• flush(): void

  render the main framebuffer on screen

  Returns void

getBlendMode

• getBlendMode(): string

  returns the current blend mode for this renderer

  Returns string

  blend mode

getCanvas

• getCanvas(): HTMLCanvasElement

  return a reference to the current render target corresponding canvas which this renderer draws to

  Returns HTMLCanvasElement

getColor

• getColor(): Color

  get the current fill & stroke style color.

  Returns Color

  current global color

getContext

• getContext(): CanvasRenderingContext2D | WebGLRenderingContext

  return a reference to the current render target corresponding Context

  Returns CanvasRenderingContext2D | WebGLRenderingContext

globalAlpha

• globalAlpha(): number

  return the current global alpha

  Returns number

overlaps

• overlaps(bounds: Bounds | Rect): boolean

  check if the given rect or bounds overlaps with the renderer screen coordinates

  Parameters

  • bounds: Bounds | Rect

  Returns boolean

  true if overlaps

reset

• reset(): void

  Reset context state

  Returns void

resize

• resize(width: number, height: number): void

  resizes the system canvas

  Parameters

  • width: number

    new width of the canvas

  • height: number

    new height of the canvas

  Returns void

setAntiAlias

• setAntiAlias(enable?: boolean): void

  enable/disable image smoothing (scaling interpolation) for the current render target

  Parameters

  • Optionalenable: boolean = false

  Returns void

setMask

• setMask(): void

  A mask limits rendering elements to the shape and position of the given mask object. So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible. Mask are not preserved through renderer context save and restore.

  Returns void

setProjection

• setProjection(matrix: Matrix3d): void

  set/change the current projection matrix (WebGL only)

  Parameters

  • matrix: Matrix3d

  Returns void

setTint

• setTint(tint: Color, alpha?: number): void

  set a coloring tint for sprite based renderables

  Parameters

  • tint: Color

    the tint color

  • Optionalalpha: number = tint.alpha

    an alpha value to be applied to the tint

  Returns void

stroke

• stroke(
      shape: Bounds | Polygon | Rect | Ellipse | Line | RoundRect,
      fill?: boolean,
  ): void

  stroke the given shape

  Parameters

  • shape: Bounds | Polygon | Rect | Ellipse | Line | RoundRect

    a shape object to stroke

  • Optionalfill: boolean

    fill the shape with the current color if true

  Returns void

tint

• tint(
      src: OffscreenCanvas | HTMLCanvasElement | HTMLImageElement,
      color: string | Color,
      mode?: string,
  ): OffscreenCanvas | HTMLCanvasElement

  tint the given image or canvas using the given color

  Parameters

  • src: OffscreenCanvas | HTMLCanvasElement | HTMLImageElement

    the source image to be tinted

  • color: string | Color

    the color that will be used to tint the image

  • Optionalmode: string = "multiply"

    the composition mode used to tint the image

  Returns OffscreenCanvas | HTMLCanvasElement

  a new canvas or offscreencanvas (if supported) element representing the tinted image

toBlob

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

  creates a Blob object representing the last rendered frame

  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 last rendered frame

  Example

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

toDataURL

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

  returns a data URL containing a representation of the last frame rendered

  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?: string, quality?: number): Promise<any>

  creates an ImageBitmap object of the last frame rendered (not supported by standard Canvas)

  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

  renderer.transferToImageBitmap().then((image) => console.log(image));
  Copy