melonjs
    Preparing search index...

    Class WebGLRenderer

    a WebGL renderer object

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    backgroundColor cache compositors currentColor currentCompositor currentProgram currentTint currentTransform customShader depthTest designRatio gl GPURenderer GPUVendor isContextValid lineJoin lineWidth maxTextures path2D projectionMatrix renderTarget scaleRatio settings type uvOffset vertexBuffer

    Accessors

    height WebGLVersion width

    Methods

    addCompositor beginPath clear clearColor clearMask clearRect clearTint clipRect closePath createPattern drawImage drawPattern fill fillArc fillEllipse fillLine fillPoint fillPolygon fillRect fillRoundRect flush getBlendMode getCanvas getColor getContext getGlobalAlpha getSupportedCompressedTextureFormats globalAlpha hasSupportedCompressedFormats lineTo moveTo overlaps rect reset resetTransform resize restore rotate roundRect save scale setBlendMode setColor setCompositor setGlobalAlpha setMask setProjection setTint setTransform setViewport stroke strokeArc strokeEllipse strokeLine strokePoint strokePolygon strokeRect strokeRoundRect tint toBlob toDataURL toImageBitmap transform translate

    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
    cache: TextureCache
    compositors: Map<Compositor, any>

    The list of active compositors

    currentColor: Color
    currentCompositor: Compositor

    The current compositor used by the renderer

    currentProgram: WebGLProgram

    a reference to the current shader program used by the renderer

    currentTint: Color
    currentTransform: Matrix2d

    The current transformation matrix used for transformations on the overall scene

    customShader: any
    depthTest: any

    the default method to sort object ("sorting", "z-buffer")

    "sorting"
    designRatio: number

    the requested video size ratio

    gl: WebGLRenderingContext

    The WebGL context

    gl

    GPURenderer: string

    The renderer string of the underlying graphics driver.

    undefined
    @readonly
    GPUVendor: string

    The vendor string of the underlying graphics driver.

    undefined
    @readonly
    isContextValid: boolean

    true if the current rendering context is valid

    true
    lineJoin: string

    sets or returns the shape used to join two line segments where they meet. Out of the three possible values for this property: "round", "bevel", and "miter", only "round" is supported for now in WebGL

    "round"
    lineWidth: number

    sets or returns the thickness of lines for shape drawing (limited to strokeLine, strokePolygon and strokeRect)

    1
    • WebGLRenderer#strokeLine
    • WebGLRenderer#strokePolygon
    • WebGLRenderer#strokeRect
    maxTextures: number

    Maximum number of texture unit supported under the current context

    path2D: Path2D

    The Path2D instance used by the renderer to draw primitives

    projectionMatrix: Matrix3d
    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
    vertexBuffer: WebGLBuffer

    the vertex buffer used by this WebGL Renderer

    Accessors

    Methods

    • add a new compositor to this renderer

      Parameters

      • compositor: Compositor

        a compositor instance

      • name: string = "default"

        a name uniquely identifying this compositor

      • Optionalactivate: boolean = false

        true if the given compositor should be set as the active one

      Returns void

    • starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path

      Returns void

      // First path
      renderer.beginPath();
      renderer.setColor("blue");
      renderer.moveTo(20, 20);
      renderer.lineTo(200, 20);
      renderer.stroke();
      // Second path
      renderer.beginPath();
      renderer.setColor("green");
      renderer.moveTo(20, 20);
      renderer.lineTo(120, 120);
      renderer.stroke();

    • Clears the gl context with the given color.

      Parameters

      • Optionalcolor: string | Color = "#000000"

        CSS color.

      • Optionalopaque: boolean = false

        Allow transparency [default] or clear the surface completely [true]

      Returns void

    • Erase the pixels in the given rectangular area by setting them to transparent black (rgba(0,0,0,0)).

      Parameters

      • x: number

        x axis of the coordinate for the rectangle starting point.

      • y: number

        y axis of the coordinate for the rectangle starting point.

      • width: number

        The rectangle's width.

      • height: number

        The rectangle's height.

      Returns void

    • clip the given region from the original canvas. Once a region is clipped, all future drawing will be limited to the clipped region. You can however save the current region using the save(), and restore it (with the restore() method) any time in the future. (this is an experimental feature !)

      Parameters

      • x: number

        x axis of the coordinate for the upper-left corner of the rectangle to start clipping from.

      • y: number

        y axis of the coordinate for the upper-left corner of the rectangle to start clipping from.

      • width: number

        the width of the rectangle to start clipping from.

      • height: number

        the height of the rectangle to start clipping from.

      Returns void

    • Draw an image to the gl context

      Parameters

      • image:
            | VideoFrame
            | OffscreenCanvas
            | ImageBitmap
            | HTMLCanvasElement
            | HTMLImageElement
            | SVGImageElement
            | HTMLVideoElement

        An element to draw into the context.

      • sx: number

        The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

      • sy: number

        The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

      • sw: number

        The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used.

      • sh: number

        The height of the sub-rectangle of the source image to draw into the destination context.

      • dx: number

        The X coordinate in the destination canvas at which to place the top-left corner of the source image.

      • dy: number

        The Y coordinate in the destination canvas at which to place the top-left corner of the source image.

      • dw: number

        The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.

      • dh: number

        The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.

      Returns void

      // Position the image on the canvas:
      renderer.drawImage(image, dx, dy);
      // Position the image on the canvas, and specify width and height of the image:
      renderer.drawImage(image, dx, dy, dWidth, dHeight);
      // Clip the image and position the clipped part on the canvas:
      renderer.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

    • Draw a pattern within the given rectangle.

      Parameters

      • pattern: TextureAtlas

        Pattern object

      • x: number

        x position where to draw the pattern

      • y: number

        y position where to draw the pattern

      • width: number

        width of the pattern

      • height: number

        height of the pattern

      Returns void

      WebGLRenderer#createPattern

    • Fill an arc at the specified coordinates with given radius, start and end points

      Parameters

      • x: number

        arc center point x-axis

      • y: number

        arc center point y-axis

      • radius: number

        arc radius

      • start: number

        start angle in radians

      • end: number

        end angle in radians

      • OptionalantiClockwise: boolean = false

        draw arc anti-clockwise

      Returns void

    • Fill an ellipse at the specified coordinates with given radius

      Parameters

      • x: number

        ellipse center point x-axis

      • y: number

        ellipse center point y-axis

      • w: number

        horizontal radius of the ellipse

      • h: number

        vertical radius of the ellipse

      Returns void

    • Fill a line of the given two points

      Parameters

      • startX: number

        the start x coordinate

      • startY: number

        the start y coordinate

      • endX: number

        the end x coordinate

      • endY: number

        the end y coordinate

      Returns void

    • Draw a filled rectangle at the specified coordinates

      Parameters

      • x: number

        x axis of the coordinate for the rectangle starting point.

      • y: number

        y axis of the coordinate for the rectangle starting point.

      • width: number

        The rectangle's width.

      • height: number

        The rectangle's height.

      Returns void

    • Draw a rounded filled rectangle at the specified coordinates

      Parameters

      • x: number

        x axis of the coordinate for the rounded rectangle starting point.

      • y: number

        y axis of the coordinate for the rounded rectangle starting point.

      • width: number

        The rounded rectangle's width.

      • height: number

        The rounded rectangle's height.

      • radius: number

        The rounded corner's radius.

      Returns void

    • creates a rectangular path whose starting point is at (x, y) and whose size is specified by width and height.

      Parameters

      • x: number

        The x axis of the coordinate for the rectangle starting point.

      • y: number

        The y axis of the coordinate for the rectangle starting point.

      • width: number

        The rectangle's width.

      • height: number

        The rectangle's height.

      Returns void

    • restores the most recently saved renderer state by popping the top entry in the drawing state stack

      Returns void

      // Save the current state
      renderer.save();

      // apply a transform and draw a rect
      renderer.tranform(matrix);
      renderer.fillRect(10, 10, 100, 100);

      // Restore to the state saved by the most recent call to save()
      renderer.restore();

    • adds a rotation to the transformation matrix.

      Parameters

      • angle: number

        the rotation angle, clockwise in radians

      Returns void

      // Rotated rectangle
      renderer.rotate((45 * Math.PI) / 180);
      renderer.setColor("red");
      renderer.fillRect(10, 10, 100, 100);

      // Reset transformation matrix to the identity matrix
      renderer.setTransform(1, 0, 0, 1, 0, 0);

    • adds a rounded rectangle to the current path.

      Parameters

      • x: number

        The x axis of the coordinate for the rectangle starting point.

      • y: number

        The y axis of the coordinate for the rectangle starting point.

      • width: number

        The rectangle's width.

      • height: number

        The rectangle's height.

      • radii: any

      Returns void

    • saves the entire state of the renderer by pushing the current state onto a stack.

      Returns void

      // Save the current state
      renderer.save();

      // apply a transform and draw a rect
      renderer.tranform(matrix);
      renderer.fillRect(10, 10, 100, 100);

      // Restore to the state saved by the most recent call to save()
      renderer.restore();

    • adds a scaling transformation to the renderer units horizontally and/or vertically

      Parameters

      • x: number

        Scaling factor in the horizontal direction. A negative value flips pixels across the vertical axis. A value of 1 results in no horizontal scaling.

      • y: number

        Scaling factor in the vertical direction. A negative value flips pixels across the horizontal axis. A value of 1 results in no vertical scaling

      Returns void

    • set the active compositor for this renderer

      Parameters

      • name: string = "default"

        a compositor name

      • Optionalshader: any = ...

        an optional shader program to be used, instead of the default one, when activating the compositor

      Returns Compositor

      an instance to the current active compositor

    • A mask limits rendering elements to the shape and position of the given mask object. If the drawing or rendering area is larger than the mask, only the intersecting part of the renderable will be visible. (Note Mask are not preserved through renderer context save and restore and need so be manually cleared)

      Parameters

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

        a shape defining the mask to be applied

      • Optionalinvert: boolean = false

        either the given shape should define what is visible (default) or the opposite

      Returns void

      CanvasRenderer#clearMask

    • Reset (overrides) the renderer transformation matrix to the identity one, and then apply the given transformation matrix.

      Parameters

      • a: number | Matrix2d

        a matrix2d to transform by, or a the a component to multiply the current matrix by

      • b: number

        the b component to multiply the current matrix by

      • c: number

        the c component to multiply the current matrix by

      • d: number

        the d component to multiply the current matrix by

      • e: number

        the e component to multiply the current matrix by

      • f: number

        the f component to multiply the current matrix by

      Returns void

    • Sets the WebGL viewport, which specifies the affine transformation of x and y from normalized device coordinates to window coordinates

      Parameters

      • Optionalx: number = 0

        x the horizontal coordinate for the lower left corner of the viewport origin

      • Optionaly: number = 0

        y the vertical coordinate for the lower left corner of the viewport origin

      • Optionalw: number = ...

        the width of viewport

      • Optionalh: number = ...

        the height of viewport

      Returns void

    • Stroke an arc at the specified coordinates with given radius, start and end points

      Parameters

      • x: number

        arc center point x-axis

      • y: number

        arc center point y-axis

      • radius: number

        arc radius

      • start: number

        start angle in radians

      • end: number

        end angle in radians

      • OptionalantiClockwise: boolean = false

        draw arc anti-clockwise

      • Optionalfill: boolean = false

        also fill the shape with the current color if true

      Returns void

    • Stroke an ellipse at the specified coordinates with given radius

      Parameters

      • x: number

        ellipse center point x-axis

      • y: number

        ellipse center point y-axis

      • w: number

        horizontal radius of the ellipse

      • h: number

        vertical radius of the ellipse

      • Optionalfill: boolean = false

        also fill the shape with the current color if true

      Returns void

    • Stroke a line of the given two points

      Parameters

      • startX: number

        the start x coordinate

      • startY: number

        the start y coordinate

      • endX: number

        the end x coordinate

      • endY: number

        the end y coordinate

      Returns void

    • Draw a stroke rectangle at the specified coordinates

      Parameters

      • x: number

        x axis of the coordinate for the rectangle starting point.

      • y: number

        y axis of the coordinate for the rectangle starting point.

      • width: number

        The rectangle's width.

      • height: number

        The rectangle's height.

      • Optionalfill: boolean = false

        also fill the shape with the current color if true

      Returns void

    • Stroke a rounded rectangle at the specified coordinates

      Parameters

      • x: number

        x axis of the coordinate for the rounded rectangle starting point.

      • y: number

        y axis of the coordinate for the rounded rectangle starting point.

      • width: number

        The rounded rectangle's width.

      • height: number

        The rounded rectangle's height.

      • radius: number

        The rounded corner's radius.

      • Optionalfill: boolean = false

        also fill the shape with the current color if true

      Returns void

    • 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));

    • Multiply given matrix into the renderer tranformation matrix

      Parameters

      • a: number | Matrix2d

        a matrix2d to transform by, or a the a component to multiply the current matrix by

      • b: number

        the b component to multiply the current matrix by

      • c: number

        the c component to multiply the current matrix by

      • d: number

        the d component to multiply the current matrix by

      • e: number

        the e component to multiply the current matrix by

      • f: number

        the f component to multiply the current matrix by

      Returns void

      WebGLRenderer.setTransform which will reset the current transform matrix prior to performing the new transformation

    • adds a translation transformation to the current matrix.

      Parameters

      • x: number

        Distance to move in the horizontal direction. Positive values are to the right, and negative to the left.

      • y: number

        Distance to move in the vertical direction. Positive values are down, and negative are up.

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods