WebGLRenderer

class WebGLRenderer extends Renderer

a WebGL renderer object

Constructor

new WebGLRenderer(options: Application.Settings) → {}

Parameters:
Name	Type	Attributes	Description
options	Application.Settings	<optional>	optional parameters for the renderer

Summary

Properties from WebGLRenderer

Map<WebGLCompositor>	compositors
WebGLCompositor	currentCompositor
WebGLProgram	currentProgram
Matrix2d	currentTransform
WebGLRenderingContext	gl
string	GPURenderer = undefined
string	GPUVendor = undefined
number	maxTextures
WebGLBuffer	vertexBuffer
number	WebGLVersion = 1

Methods from WebGLRenderer

	addCompositor(compositor: Compositor, name: string, activate: boolean)
	beginPath()
	clear() Clear the frame buffer
	clearColor(color: Color \| string, opaque: boolean)
	clearMask()
	clearRect(x: number, y: number, width: number, height: number)
	clipRect(x: number, y: number, width: number, height: number)
	closePath() 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
TextureAtlas	createPattern(image: HTMLImageElement \| SVGImageElement \| HTMLVideoElement \| HTMLCanvasElement \| ImageBitmap \| OffscreenCanvas \| VideoFrame, repeat: string)
	drawImage(image: HTMLImageElement \| SVGImageElement \| HTMLVideoElement \| HTMLCanvasElement \| ImageBitmap \| OffscreenCanvas \| VideoFrame, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number)
	drawPattern(pattern: TextureAtlas, x: number, y: number, width: number, height: number)
	fill(shape: Rect \| RoundRect \| Polygon \| Line \| Ellipse)
	fillArc(x: number, y: number, radius: number, start: number, end: number, antiClockwise: boolean)
	fillEllipse(x: number, y: number, w: number, h: number)
	fillLine(startX: number, startY: number, endX: number, endY: number)
	fillPoint(x: number, y: number)
	fillPolygon(poly: Polygon)
	fillRect(x: number, y: number, width: number, height: number)
	fillRoundRect(x: number, y: number, width: number, height: number, radius: number)
	flush() Flush the compositor to the frame buffer
WebGLRenderingContext	getContext()
number	getGlobalAlpha()
Object	getSupportedCompressedTextureFormats()
	hasSupportedCompressedFormats(format: Number)
	lineTo(x, y) adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.
	moveTo(x: number, y: number)
	rect(x: number, y: number, width: number, height: number)
	reset() Reset context state
	resetTransform() Reset the gl transform to identity
	restore()
	rotate(angle: number)
	roundRect(x: number, y: number, width: number, height: number, radius: number)
	save()
	scale(x: number, y: number)
	setBlendMode(mode: string, gl: WebGLRenderingContext)
	setColor(color: Color \| string)
Compositor	setCompositor(name: string, shader: GLShader)
	setGlobalAlpha(alpha: number)
	setLineWidth(width: number)
	setMask(mask: Rect \| RoundRect \| Polygon \| Line \| Ellipse, invert: boolean)
	setProjection(matrix: Matrix3d)
	setTransform(a: Matrix2d \| number, b: number, c: number, d: number, e: number, f: number)
	setViewport(x : number, y : number, w : number, h : number)
	stroke(shape: Rect \| RoundRect \| Polygon \| Line \| Ellipse, fill: boolean)
	strokeArc(x: number, y: number, radius: number, start: number, end: number, antiClockwise: boolean, fill: boolean)
	strokeEllipse(x: number, y: number, w: number, h: number, fill: boolean)
	strokeLine(startX: number, startY: number, endX: number, endY: number)
	strokePoint(x: number, y: number)
	strokePolygon(poly: Polygon, fill: boolean)
	strokeRect(x: number, y: number, width: number, height: number, fill: boolean)
	strokeRoundRect(x: number, y: number, width: number, height: number, radius: number, fill: boolean)
	transform(a: Matrix2d \| number, b: number, c: number, d: number, e: number, f: number)
	translate(x: number, y: number)

Properties inherited from Renderer

string	depthTest = "sorting"
number	designRatio
number	height
boolean	isContextValid = true
Path2D	path2D
CanvasRenderTarget	renderTarget
Vector2d	scaleRatio = <1,1>
object	settings
string	type = "Generic"
number	width

Methods inherited from Renderer

	clearTint()
string	getBlendMode()
HTMLCanvasElement	getCanvas()
Color	getColor()
HTMLCanvasElement	getScreenCanvas()
CanvasRenderingContext2D	getScreenContext()
number	globalAlpha()
boolean	overlaps(bounds: Rect \| Bounds)
	resize(width: number, height: number)
	setAntiAlias(enable: boolean)
	setTint(tint: Color, alpha: number)
HTMLCanvasElement \| OffscreenCanvas	tint(src: HTMLImageElement \| HTMLCanvasElement \| OffscreenCanvas, color: Color \| string, mode: string)
Promise	toBlob(type: string, quality: number)
Promise	toDataURL(type: string, quality: number)
Promise	toImageBitmap(type: string, quality: number)

Public Properties

compositors webgl_renderer.js:103

compositors: Map<WebGLCompositor>

Map<WebGLCompositor>

The list of active compositors

currentCompositor webgl_renderer.js:91

currentCompositor: WebGLCompositor

WebGLCompositor

The current compositor used by the renderer

currentProgram webgl_renderer.js:97

currentProgram: WebGLProgram

WebGLProgram

a reference to the current shader program used by the renderer

currentTransform webgl_renderer.js:85

currentTransform: Matrix2d

Matrix2d

The current transformation matrix used for transformations on the overall scene

gl webgl_renderer.js:45

gl: WebGLRenderingContext

WebGLRenderingContext

The WebGL context

GPURenderer webgl_renderer.js:37

GPURenderer: string = undefined

string

The renderer string of the underlying graphics driver.

GPUVendor webgl_renderer.js:29

GPUVendor: string = undefined

string

The vendor string of the underlying graphics driver.

maxTextures webgl_renderer.js:58

maxTextures: number

number

Maximum number of texture unit supported under the current context

vertexBuffer webgl_renderer.js:52

vertexBuffer: WebGLBuffer

WebGLBuffer

the vertex buffer used by this WebGL Renderer

WebGLVersion webgl_renderer.js:180

WebGLVersion: number = 1

number

The WebGL version used by this renderer (1 or 2)

Public Methods

addCompositor webgl_renderer.js:273

addCompositor(compositor: Compositor, name: string, activate: boolean) → {}

add a new compositor to this renderer

Parameters:
Name	Type	Attributes	Default	Description
compositor	Compositor			a compositor instance
name	string		"default"	a name uniquely identifying this compositor
activate	boolean	<optional>	false	true if the given compositor should be set as the active one

beginPath webgl_renderer.js:511

beginPath() → {}

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

// 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 webgl_renderer.js:392

clear() → {}

Clear the frame buffer

clearColor webgl_renderer.js:405

clearColor(color: Color | string, opaque: boolean) → {}

Clears the gl context with the given color.

Parameters:
Name	Type	Attributes	Default	Description
color	Color \| string	<optional>	"#000000"	CSS color.
opaque	boolean	<optional>	false	Allow transparency [default] or clear the surface completely [true]

clearMask webgl_renderer.js:1153

clearMask() → {}

disable (remove) the rendering mask set through setMask.

See: WebGLRenderer#setMask

clearRect webgl_renderer.js:428

clearRect(x: number, y: number, width: number, height: number) → {}

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

Parameters:
Name	Type	Description
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.

clipRect webgl_renderer.js:1062

clipRect(x: number, y: number, width: number, height: number) → {}

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:
Name	Type	Description
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.

closePath webgl_renderer.js:597

closePath() → {}

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

createPattern webgl_renderer.js:333

createPattern(image: HTMLImageElement | SVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas | VideoFrame, repeat: string) → {TextureAtlas}

Create a pattern with the specified repetition

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

Parameters:
Name	Type	Description
image	HTMLImageElement \| SVGImageElement \| HTMLVideoElement \| HTMLCanvasElement \| ImageBitmap \| OffscreenCanvas \| VideoFrame	Source image to be used as the pattern's image
repeat	string	Define how the pattern should be repeated

Returns:
Type	Description
TextureAtlas	the patterned texture created

See: ImageLayer#repeat

drawImage webgl_renderer.js:442

drawImage(image: HTMLImageElement | SVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas | VideoFrame, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number) → {}

Draw an image to the gl context

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

Parameters:
Name	Type	Description
image	HTMLImageElement \| SVGImageElement \| HTMLVideoElement \| HTMLCanvasElement \| ImageBitmap \| OffscreenCanvas \| VideoFrame	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.

drawPattern webgl_renderer.js:495

drawPattern(pattern: TextureAtlas, x: number, y: number, width: number, height: number) → {}

Draw a pattern within the given rectangle.

Parameters:
Name	Type	Description
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

See: WebGLRenderer#createPattern

fill webgl_renderer.js:589

fill(shape: Rect | RoundRect | Polygon | Line | Ellipse) → {}

fill the given shape or the current defined path

Parameters:
Name	Type	Attributes	Description
shape	Rect \| RoundRect \| Polygon \| Line \| Ellipse	<optional>	a shape object to fill

fillArc webgl_renderer.js:816

fillArc(x: number, y: number, radius: number, start: number, end: number, antiClockwise: boolean) → {}

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

Parameters:
Name	Type	Attributes	Default	Description
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
antiClockwise	boolean	<optional>	false	draw arc anti-clockwise

fillEllipse webgl_renderer.js:848

fillEllipse(x: number, y: number, w: number, h: number) → {}

Fill an ellipse at the specified coordinates with given radius

Parameters:
Name	Type	Description
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

fillLine webgl_renderer.js:875

fillLine(startX: number, startY: number, endX: number, endY: number) → {}

Fill a line of the given two points

Parameters:
Name	Type	Description
startX	number	the start x coordinate
startY	number	the start y coordinate
endX	number	the end x coordinate
endY	number	the end y coordinate

fillPoint webgl_renderer.js:997

fillPoint(x: number, y: number) → {}

Draw a a point at the specified coordinates

Parameters:
Name	Type	Description
x	number	x axis of the coordinate for the point.
y	number	y axis of the coordinate for the point.

fillPolygon webgl_renderer.js:918

fillPolygon(poly: Polygon) → {}

Fill a me.Polygon on the screen

Parameters:
Name	Type	Description
poly	Polygon	the shape to draw

fillRect webgl_renderer.js:945

fillRect(x: number, y: number, width: number, height: number) → {}

Draw a filled rectangle at the specified coordinates

Parameters:
Name	Type	Description
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.

fillRoundRect webgl_renderer.js:976

fillRoundRect(x: number, y: number, width: number, height: number, radius: number) → {}

Draw a rounded filled rectangle at the specified coordinates

Parameters:
Name	Type	Description
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.

flush webgl_renderer.js:365

flush() → {}

Flush the compositor to the frame buffer

getContext webgl_renderer.js:604

getContext() → {WebGLRenderingContext}

Returns the WebGLContext instance for the renderer return a reference to the system 2d Context

Returns:
Type	Description
WebGLRenderingContext	the current WebGL context

getGlobalAlpha webgl_renderer.js:768

getGlobalAlpha() → {number}

Return the global alpha

Returns:
Type	Description
number	global alpha value

getSupportedCompressedTextureFormats webgl_renderer.js:190

getSupportedCompressedTextureFormats() → {Object}

return the list of supported compressed texture formats

Returns:
Type	Description
Object

hasSupportedCompressedFormats webgl_renderer.js:210

hasSupportedCompressedFormats(format: Number) → {}

return true if the given compressed texture format is supported

Parameters:
Name	Type	Description
format	Number

Returns:
Type	Description

lineTo webgl_renderer.js:540

lineTo(x, y) → {}

adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.

Parameters:
Name	Type	Description
x
y

moveTo webgl_renderer.js:531

moveTo(x: number, y: number) → {}

begins a new sub-path at the point specified by the given (x, y) coordinates.

Parameters:
Name	Type	Description
x	number	The x axis of the point.
y	number	The y axis of the point.

rect webgl_renderer.js:547

rect(x: number, y: number, width: number, height: number) → {}

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

Parameters:
Name	Type	Description
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.

reset webgl_renderer.js:227

reset() → {}

Reset context state

resetTransform webgl_renderer.js:326

resetTransform() → {}

Reset the gl transform to identity

restore webgl_renderer.js:657

restore() → {}

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

 // 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 webgl_renderer.js:726

rotate(angle: number) → {}

adds a rotation to the transformation matrix.

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

Parameters:
Name	Type	Description
angle	number	the rotation angle, clockwise in radians

roundRect webgl_renderer.js:558

roundRect(x: number, y: number, width: number, height: number, radius: number) → {}

adds a rounded rectangle to the current path.

Parameters:
Name	Type	Description
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.
radius	number	The corner radius.

save webgl_renderer.js:701

save() → {}

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

 // 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 webgl_renderer.js:742

scale(x: number, y: number) → {}

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

Parameters:
Name	Type	Description
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

setBlendMode webgl_renderer.js:613

setBlendMode(mode: string, gl: WebGLRenderingContext) → {}

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:
Name	Type	Attributes	Default	Description
mode	string	<optional>	"normal"	blend mode : "normal", "multiply", "lighter", "additive", "screen"
gl	WebGLRenderingContext	<optional>		a WebGL context

See: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

setColor webgl_renderer.js:776

setColor(color: Color | string) → {}

Set the current fill & stroke style color. By default, or upon reset, the value is set to #000000.

Parameters:
Name	Type	Description
color	Color \| string	css color string.

setCompositor webgl_renderer.js:294

setCompositor(name: string, shader: GLShader) → {Compositor}

set the active compositor for this renderer

Parameters:
Name	Type	Attributes	Default	Description
name	string		"default"	a compositor name
shader	GLShader	<optional>		an optional shader program to be used, instead of the default one, when activating the compositor

Returns:
Type	Description
Compositor	an instance to the current active compositor

setGlobalAlpha webgl_renderer.js:760

setGlobalAlpha(alpha: number) → {}

Set the global alpha

Parameters:
Name	Type	Description
alpha	number	0.0 to 1.0 values accepted.

setLineWidth webgl_renderer.js:787

setLineWidth(width: number) → {}

Set the line width

Parameters:
Name	Type	Description
width	number	Line width

setMask webgl_renderer.js:1109

setMask(mask: Rect | RoundRect | Polygon | Line | Ellipse, invert: boolean) → {}

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:
Name	Type	Attributes	Default	Description
mask	Rect \| RoundRect \| Polygon \| Line \| Ellipse	<optional>		a shape defining the mask to be applied
invert	boolean	<optional>	false	either the given shape should define what is visible (default) or the opposite

See: CanvasRenderer#clearMask

setProjection webgl_renderer.js:372

setProjection(matrix: Matrix3d) → {}

set/change the current projection matrix (WebGL only)

Parameters:
Name	Type	Description
matrix	Matrix3d	the new projection matrix

setTransform webgl_renderer.js:1006

setTransform(a: Matrix2d | number, b: number, c: number, d: number, e: number, f: number) → {}

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

Parameters:
Name	Type	Description
a	Matrix2d \| number	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

setViewport webgl_renderer.js:381

setViewport(x : number, y : number, w : number, h : number) → {}

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

Parameters:
Name	Type	Attributes	Default	Description
x	number	<optional>	0	x the horizontal coordinate for the lower left corner of the viewport origin
y	number	<optional>	0	y the vertical coordinate for the lower left corner of the viewport origin
w	number	<optional>	width of the canvas	the width of viewport
h	number	<optional>	height of the canvas	the height of viewport

stroke webgl_renderer.js:570

stroke(shape: Rect | RoundRect | Polygon | Line | Ellipse, fill: boolean) → {}

stroke the given shape or the current defined path

Parameters:
Name	Type	Attributes	Default	Description
shape	Rect \| RoundRect \| Polygon \| Line \| Ellipse	<optional>		a shape object to stroke
fill	boolean	<optional>	false	fill the shape with the current color if true

strokeArc webgl_renderer.js:795

strokeArc(x: number, y: number, radius: number, start: number, end: number, antiClockwise: boolean, fill: boolean) → {}

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

Parameters:
Name	Type	Attributes	Default	Description
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
antiClockwise	boolean	<optional>	false	draw arc anti-clockwise
fill	boolean	<optional>	false	also fill the shape with the current color if true

strokeEllipse webgl_renderer.js:829

strokeEllipse(x: number, y: number, w: number, h: number, fill: boolean) → {}

Stroke an ellipse at the specified coordinates with given radius

Parameters:
Name	Type	Attributes	Default	Description
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
fill	boolean	<optional>	false	also fill the shape with the current color if true

strokeLine webgl_renderer.js:859

strokeLine(startX: number, startY: number, endX: number, endY: number) → {}

Stroke a line of the given two points

Parameters:
Name	Type	Description
startX	number	the start x coordinate
startY	number	the start y coordinate
endX	number	the end x coordinate
endY	number	the end y coordinate

strokePoint webgl_renderer.js:988

strokePoint(x: number, y: number) → {}

Stroke a Point at the specified coordinates

Parameters:
Name	Type	Description
x	number	x axis of the coordinate for the point.
y	number	y axis of the coordinate for the point.

strokePolygon webgl_renderer.js:886

strokePolygon(poly: Polygon, fill: boolean) → {}

Stroke a me.Polygon on the screen with a specified color

Parameters:
Name	Type	Attributes	Default	Description
poly	Polygon			the shape to draw
fill	boolean	<optional>	false	also fill the shape with the current color if true

strokeRect webgl_renderer.js:926

strokeRect(x: number, y: number, width: number, height: number, fill: boolean) → {}

Draw a stroke rectangle at the specified coordinates

Parameters:
Name	Type	Attributes	Default	Description
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.
fill	boolean	<optional>	false	also fill the shape with the current color if true

strokeRoundRect webgl_renderer.js:956

strokeRoundRect(x: number, y: number, width: number, height: number, radius: number, fill: boolean) → {}

Stroke a rounded rectangle at the specified coordinates

Parameters:
Name	Type	Attributes	Default	Description
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.
fill	boolean	<optional>	false	also fill the shape with the current color if true

transform webgl_renderer.js:1021

transform(a: Matrix2d | number, b: number, c: number, d: number, e: number, f: number) → {}

Multiply given matrix into the renderer tranformation matrix

Parameters:
Name	Type	Description
a	Matrix2d \| number	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

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

translate webgl_renderer.js:1046

translate(x: number, y: number) → {}

adds a translation transformation to the current matrix.

Parameters:
Name	Type	Description
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.