melonJS
    Preparing search index...

    Class Renderer

    a base renderer object

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    backgroundColor currentColor currentScissor currentTint customShader designRatio GPURenderer isContextValid path2D projectionMatrix renderState renderTarget scaleRatio settings type uvOffset

    Accessors

    currentBlendMode height width

    Methods

    clear clearMask clearTint createLinearGradient createRadialGradient drawMesh fill flush getBlendMode getCanvas getColor getContext getLineDash getSupportedCompressedTextureFormats globalAlpha hasSupportedCompressedFormats overlaps reset resize setAntiAlias setBlendMode setColor setLineDash setMask setProjection setTint stroke tint toBlob toDataURL toImageBitmap

    Constructors

    Properties

    backgroundColor: Color

    The background color used to clear the main framebuffer. Note: alpha value will be set based on the transparent property of the renderer settings.

    black
    currentColor: Color
    currentScissor: Int32Array<ArrayBufferLike>
    currentTint: Color
    customShader: any

    an optional custom shader to use instead of the default one. Set by a renderable's preDraw when a shader is assigned. (WebGL only, ignored by Canvas renderer)

    designRatio: number

    the requested video size ratio

    GPURenderer: string | undefined

    The GPU renderer string (WebGL only, undefined for Canvas)

    isContextValid: boolean

    true if the current rendering context is valid

    true
    path2D: Path2D

    The Path2D instance used by the renderer to draw primitives

    projectionMatrix: Matrix3d
    renderState: RenderState

    The renderer state container (color, tint, transform, scissor, blend mode) with a zero-allocation save/restore stack.

    renderTarget: CanvasRenderTarget

    The renderer renderTarget

    renderTarget

    scaleRatio: Vector2d

    the scaling ratio to be applied to the main canvas

    <1,1>
    settings: object

    The given constructor options

    type: string

    The renderer type : Canvas, WebGL, etc... (override this property with a specific value when implementing a custom renderer)

    uvOffset: number

    Accessors

    Methods

    • Create a linear gradient that can be used with Renderer#setColor.

      Parameters

      • x0: number

        x-axis coordinate of the start point

      • y0: number

        y-axis coordinate of the start point

      • x1: number

        x-axis coordinate of the end point

      • y1: number

        y-axis coordinate of the end point

      Returns Gradient

      a Gradient object

    • Create a radial gradient that can be used with Renderer#setColor.

      Parameters

      • x0: number

        x-axis coordinate of the start circle

      • y0: number

        y-axis coordinate of the start circle

      • r0: number

        radius of the start circle

      • x1: number

        x-axis coordinate of the end circle

      • y1: number

        y-axis coordinate of the end circle

      • r1: number

        radius of the end circle

      Returns Gradient

      a Gradient object

    • Draw a textured triangle mesh. The mesh object must provide: vertices (Float32Array, x/y/z triplets), uvs (Float32Array, u/v pairs), indices (Uint16Array, triangle indices), texture (TextureAtlas), vertexCount (number), and optionally cullBackFaces (boolean, default true). WebGL uses hardware depth testing; Canvas uses painter's algorithm (back-to-front sort).

      Parameters

      • mesh: Mesh

        a Mesh renderable or compatible object

      Returns void

    • return a reference to the current render target corresponding Context

      Returns CanvasRenderingContext2D | WebGLRenderingContext

    • return the list of supported compressed texture formats. The base implementation returns null for all formats (no GPU compressed texture support). The WebGL renderer overrides this with actual extension availability.

      Returns Object

      an object with one key per extension family, each value is the WebGL extension object or null

    • return true if the given compressed texture format is supported

      Parameters

      • format: number

        a WebGL compressed texture format constant

      Returns boolean

    • resizes the system canvas

      Parameters

      • width: number

        new width of the canvas

      • height: number

        new height of the canvas

      Returns void

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

      Parameters

      • Optionalenable: boolean = false

      Returns void

    • set the current blend mode. Subclasses (CanvasRenderer, WebGLRenderer) implement the actual GL/Canvas logic.

      Parameters

      • Optionalmode: string = "normal"

        blend mode

      Returns void

    • Set the line dash pattern for stroke operations.

      Parameters

      • segments: number[]

        an array of numbers specifying distances to alternately draw a line and a gap. An empty array clears the dash pattern (solid lines).

      Returns void

      // draw a dashed line
      renderer.setLineDash([10, 5]);
      renderer.strokeLine(0, 0, 100, 0);
      // clear the dash pattern
      renderer.setLineDash([]);

    • 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

    • 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

    • tint the given image or canvas using the given color

      Parameters

      • src: HTMLImageElement | HTMLCanvasElement | OffscreenCanvas

        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 HTMLCanvasElement | OffscreenCanvas

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

    • 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

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

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

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

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

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

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods