Class WebGLRenderer

a WebGL renderer object

Hierarchy (view full)

Renderer
- WebGLRenderer

Index

Constructors

constructor

Accessors

WebGLVersion height width

Constructors

constructor

new WebGLRenderer(options?): WebGLRenderer
Parameters
- Optionaloptions: any
  optional parameters for the renderer
Returns WebGLRenderer
Overrides Renderer.constructor
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:39

Properties

`Readonly`GPURenderer

GPURenderer: string

The renderer string of the underlying graphics driver.

Default

undefined
@readonly

`Readonly`GPUVendor

GPUVendor: string

The vendor string of the underlying graphics driver.

Default

undefined
@readonly

backgroundColor

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.

Default

black

cache

cache: TextureCache

compositors

compositors: Map<Compositor, any>

The list of active compositors

currentColor

currentColor: Color

currentCompositor

currentCompositor: Compositor

The current compositor used by the renderer

currentProgram

currentProgram: WebGLProgram

a reference to the current shader program used by the renderer

currentTint

currentTint: Color

currentTransform

currentTransform: Matrix2d

The current transformation matrix used for transformations on the overall scene

customShader

customShader: any

depthTest

depthTest: any

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

Default

"sorting"

designRatio

designRatio: number

the requested video size ratio

gl

gl: WebGLRenderingContext

The WebGL context

Name

isContextValid

isContextValid: boolean

true if the current rendering context is valid

Default

true

lineJoin

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

Default

"round"

lineWidth

lineWidth: number

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

Default

See

WebGLRenderer#strokeLine
WebGLRenderer#strokePolygon
WebGLRenderer#strokeRect

`Readonly`maxTextures

maxTextures: number

Maximum number of texture unit supported under the current context

path2D

path2D: Path2D

The Path2D instance used by the renderer to draw primitives

projectionMatrix

projectionMatrix: Matrix3d

renderTarget

renderTarget: CanvasRenderTarget

The renderer renderTarget

Name

renderTarget

scaleRatio

scaleRatio: Vector2d

the scaling ratio to be applied to the main canvas

Default

<1,1>

settings

settings: object

The given constructor options

type

type: string

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

uvOffset

uvOffset: number

vertexBuffer

vertexBuffer: WebGLBuffer

the vertex buffer used by this WebGL Renderer

Accessors

WebGLVersion

get WebGLVersion(): number
The WebGL version used by this renderer (1 or 2)

Returns number
Default
```
1
```
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:234

height

get height(): number
return the height of the canvas which this renderer draws to

Returns number
height of the system Canvas
Inherited from Renderer.height
- Defined in packages/melonjs/src/video/renderer.js:137
set height(value): void
Parameters
- value: number
Returns void
Inherited from Renderer.height
- Defined in packages/melonjs/src/video/renderer.js:141

width

get width(): number
return the width of the canvas which this renderer draws to

Returns number
width of the system Canvas
Inherited from Renderer.width
- Defined in packages/melonjs/src/video/renderer.js:149
set width(value): void
Parameters
- value: number
Returns void
Inherited from Renderer.width
- Defined in packages/melonjs/src/video/renderer.js:153

Methods

addCompositor

addCompositor(compositor, name?, activate?): void
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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:344

beginPath

beginPath(): 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

Example

// 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();

clear

clear(): void
Clear the frame buffer

Returns void
Overrides Renderer.clear
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:476

clearColor

clearColor(color?, opaque?): void
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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:495

clearMask

clearMask(): void
disable (remove) the rendering mask set through setMask.

Returns void
See
WebGLRenderer#setMask
Overrides Renderer.clearMask
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:1338

clearRect

clearRect(x, y, width, height): 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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:525

clearTint

clearTint(): void
clear the rendering tint set through setTint.

Returns void
See
Renderer#setTint
Inherited from Renderer.clearTint
- Defined in packages/melonjs/src/video/renderer.js:393

clipRect

clipRect(x, y, width, height): 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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:1246

closePath

closePath(): void
add a straight line from the current point to the start of the current sub-path. If the shape has already been closed or has only one point, this function does nothing

Returns void
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:714

createPattern

createPattern(image, repeat): TextureAtlas
Create a pattern with the specified repetition
Parameters
- image:
      | OffscreenCanvas
      | ImageBitmap
      | VideoFrame
      | HTMLCanvasElement
      | HTMLImageElement
      | SVGImageElement
      | HTMLVideoElement
  Source image to be used as the pattern's image
- repeat: string
  Define how the pattern should be repeated
Returns TextureAtlas
the patterned texture created
See
ImageLayer#repeat

Example
```
let tileable   = renderer.createPattern(image, "repeat");
let horizontal = renderer.createPattern(image, "repeat-x");
let vertical   = renderer.createPattern(image, "repeat-y");
let basic      = renderer.createPattern(image, "no-repeat");
```
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:410

drawImage

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh): void
Draw an image to the gl context
Parameters
- image:
      | OffscreenCanvas
      | ImageBitmap
      | VideoFrame
      | 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
Example
```
// 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);
```
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:551

drawPattern

drawPattern(pattern, x, y, width, height): void
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
See
WebGLRenderer#createPattern
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:605

fill

fill(shape?): void
fill the given shape or the current defined path
Parameters
- Optionalshape: any
  a shape object to fill
Returns void
Overrides Renderer.fill
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:707

fillArc

fillArc(x, y, radius, start, end, antiClockwise?): void
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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:934

fillEllipse

fillEllipse(x, y, w, h): 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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:967

fillLine

fillLine(startX, startY, endX, endY): 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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:1020

fillPoint

fillPoint(x, y): void
Draw a a point at the specified coordinates
Parameters
- x: number
  x axis of the coordinate for the point.
- y: number
  y axis of the coordinate for the point.
Returns void
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:1175

fillPolygon

fillPolygon(poly): void
Fill a me.Polygon on the screen
Parameters
- poly: Polygon
  the shape to draw
Returns void
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:1077

fillRect

fillRect(x, y, width, height): 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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:1122

fillRoundRect

fillRoundRect(x, y, width, height, radius): 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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:1157

flush

flush(): void
Flush the compositor to the frame buffer

Returns void
Overrides Renderer.flush
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:444

getBlendMode

getBlendMode(): string
returns the current blend mode for this renderer

Returns string
blend mode
Inherited from Renderer.getBlendMode
- Defined in packages/melonjs/src/video/renderer.js:203

getCanvas

getCanvas(): HTMLCanvasElement
return a reference to the current render target corresponding canvas which this renderer draws to

Returns HTMLCanvasElement
Inherited from Renderer.getCanvas
- Defined in packages/melonjs/src/video/renderer.js:187

getColor

getColor(): Color
get the current fill & stroke style color.

Returns Color
current global color
Inherited from Renderer.getColor
- Defined in packages/melonjs/src/video/renderer.js:211

getContext

getContext(): WebGLRenderingContext
Returns the WebGLContext instance for the renderer return a reference to the system 2d Context

Returns WebGLRenderingContext
the current WebGL context
Overrides Renderer.getContext
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:723

getGlobalAlpha

getGlobalAlpha(): number
Return the global alpha

Returns number
global alpha value
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:886

getSupportedCompressedTextureFormats

getSupportedCompressedTextureFormats(): Object
return the list of supported compressed texture formats

Returns Object
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:242

globalAlpha

globalAlpha(): number
return the current global alpha

Returns number
Inherited from Renderer.globalAlpha
- Defined in packages/melonjs/src/video/renderer.js:219

hasSupportedCompressedFormats

hasSupportedCompressedFormats(format): boolean
return true if the given compressed texture format is supported
Parameters
- format: number
Returns boolean
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:278

lineTo

lineTo(x, y): void
adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.
Parameters
- x: any
- y: any
Returns void
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:654

moveTo

moveTo(x, y): void
begins a new sub-path at the point specified by the given (x, y) coordinates.
Parameters
- x: number
  The x axis of the point.
- y: number
  The y axis of the point.
Returns void
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:647

overlaps

overlaps(bounds): boolean
check if the given rect or bounds overlaps with the renderer screen coordinates
Parameters
- bounds: Bounds | Rect
Returns boolean
true if overlaps
Inherited from Renderer.overlaps
- Defined in packages/melonjs/src/video/renderer.js:228

rect

rect(x, y, width, height): 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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:665

reset

reset(): void
Reset context state

Returns void
Overrides Renderer.reset
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:293

resetTransform

resetTransform(): void
Reset the gl transform to identity

Returns void
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:394

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
Inherited from Renderer.resize
- Defined in packages/melonjs/src/video/renderer.js:242

restore

restore(): void

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

Returns void

Example

// 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();

rotate

rotate(angle): void

adds a rotation to the transformation matrix.

Parameters

angle: number
the rotation angle, clockwise in radians

Returns void

Example

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

roundRect

roundRect(x, y, width, height, radii): void
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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:677

save

save(): void

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

Returns void

Example

// 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();

scale

scale(x, y): void
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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:860

setBlendMode

setBlendMode(mode?, gl?): void
set a blend mode for the given context.
Supported blend mode between Canvas and WebGL remderer :
- "normal" : this is the default mode and draws new content on top of the existing content
- "multiply" : the pixels of the top layer are multiplied with the corresponding pixel of the bottom layer. A darker picture is the result.
- "additive or lighter" : where both content overlap the color is determined by adding color values.
- "screen" : The pixels are inverted, multiplied, and inverted again. A lighter picture is the result (opposite of multiply)
Parameters
- Optionalmode: string = "normal"
  blend mode : "normal", "multiply", "lighter", "additive", "screen"
- Optionalgl: WebGLRenderingContext = ...
  a WebGL context
Returns void
See
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:742

setColor

setColor(color): void
Set the current fill & stroke style color. By default, or upon reset, the value is set to #000000.
Parameters
- color: string | Color
  css color string.
Returns void
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:895

setCompositor

setCompositor(name?, shader?): Compositor
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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:365

setGlobalAlpha

setGlobalAlpha(alpha): void
Set the global alpha
Parameters
- alpha: number
  0.0 to 1.0 values accepted.
Returns void
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:878

setMask

setMask(mask?, invert?): void
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
See
CanvasRenderer#clearMask
Overrides Renderer.setMask
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:1299

setProjection

setProjection(matrix): void
set/change the current projection matrix (WebGL only)
Parameters
- matrix: Matrix3d
  the new projection matrix
Returns void
Overrides Renderer.setProjection
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:452

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
Inherited from Renderer.setTint
- Defined in packages/melonjs/src/video/renderer.js:383

setTransform

setTransform(a, b, c, d, e, f): void
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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:1189

setViewport

setViewport(x?, y?, w?, h?): 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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:464

stroke

stroke(shape?, fill?): void
stroke the given shape or the current defined path
Parameters
- Optionalshape: any
  a shape object to stroke
- Optionalfill: boolean
  fill the shape with the current color if true
Returns void
Overrides Renderer.stroke
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:686

strokeArc

strokeArc(x, y, radius, start, end, antiClockwise?, fill?): 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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:911

strokeEllipse

strokeEllipse(x, y, w, h, fill?): 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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:946

strokeLine

strokeLine(startX, startY, endX, endY): 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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:978

strokePoint

strokePoint(x, y): void
Stroke a Point at the specified coordinates
Parameters
- x: number
  x axis of the coordinate for the point.
- y: number
  y axis of the coordinate for the point.
Returns void
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:1166

strokePolygon

strokePolygon(poly, fill?): void
Stroke a Polygon on the screen with a specified color
Parameters
- poly: Polygon
  the shape to draw
- Optionalfill: boolean = false
  also fill the shape with the current color if true
Returns void
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:1029

strokeRect

strokeRect(x, y, width, height, fill?): 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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:1089

strokeRoundRect

strokeRoundRect(x, y, width, height, radius, fill?): 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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:1135

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
Inherited from Renderer.tint
- Defined in packages/melonjs/src/video/renderer.js:338

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));
```
Inherited from Renderer.toBlob
- Defined in packages/melonjs/src/video/renderer.js:406

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));
```
Inherited from Renderer.toDataURL
- Defined in packages/melonjs/src/video/renderer.js:431

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));
```
Inherited from Renderer.toImageBitmap
- Defined in packages/melonjs/src/video/renderer.js:419

transform

transform(a, b, c, d, e, f): void
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
See
WebGLRenderer.setTransform which will reset the current transform matrix prior to performing the new transformation
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:1204

translate

translate(x, y): void
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
- Defined in packages/melonjs/src/video/webgl/webgl_renderer.js:1224

Class WebGLRenderer

Hierarchy (view full)

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns WebGLRenderer

Properties

ReadonlyGPURenderer

Default

ReadonlyGPUVendor

Default

backgroundColor

Default

cache

compositors

currentColor

currentCompositor

currentProgram

currentTint

currentTransform

customShader

depthTest

Default

designRatio

gl

Name

isContextValid

Default

lineJoin

Default

lineWidth

Default

See

ReadonlymaxTextures

path2D

projectionMatrix

renderTarget

Name

scaleRatio

Default

settings

type

uvOffset

vertexBuffer

Accessors

WebGLVersion

Returns number

Default

height

Returns number

Parameters

Returns void

width

Returns number

Parameters

Returns void

Methods

addCompositor

Parameters

Returns void

beginPath

Returns void

Example

clear

Returns void

clearColor

Parameters

Returns void

clearMask

Returns void

See

clearRect

Parameters

Returns void

clearTint

`Readonly`GPURenderer

`Readonly`GPUVendor

`Readonly`maxTextures