Class Renderer

constructor

• new Renderer(options?): Renderer

• Parameters

  • Optionaloptions: any

    optional parameters for the renderer

  Returns Renderer

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): 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): 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): void

• fill the given shape

  Parameters

  • shape:
        | Rect
        | Polygon
        | Line
        | Ellipse
        | 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): boolean

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

  Parameters

  • bounds: Rect | Bounds

  Returns boolean

  true if overlaps

reset

• reset(): void

• Reset context state

  Returns void

resize

• resize(width, height): 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?): 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): void

• set/change the current projection matrix (WebGL only)

  Parameters

  • matrix: Matrix3d

  Returns void

setTint

• setTint(tint, alpha?): 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, fill?): void

• stroke the given shape

  Parameters

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

    a shape object to stroke
  • Optionalfill: boolean

    fill the shape with the current color if true

  Returns void

tint

• tint(src, color, mode?): 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?, quality?): 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?, quality?): 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?, quality?): 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