Class Renderer

The main Renderer class with all the rendering function

Hierarchy

Renderer

Constructors

constructor

new Renderer(options): Renderer
Parameters
- options: RendererOptions
  
  Options for the renderer
Returns Renderer
- Defined in core/Renderer.ts:81

Properties

`Private` buffers

buffers: Buffer[] = []

camera

camera: Camera

The camera to render with

canvas

canvas: HTMLCanvasElement

The HTML canvas element

`Private` currentBufferIndex

currentBufferIndex: number = 0

`Private` currentPath

currentPath: (null | Vertex)[] = []

gl

gl: WebGL2RenderingContext | WebGLRenderingContext

The WebGL Rendering Context

`Private` shaderProgramInfo

shaderProgramInfo: ProgramInfo

textRenderer

textRenderer: null | CanvasTextRenderer

The text renderer

transform

transform: Transform

The global transform

vertexColor

vertexColor: Color = ...

The default vertex color

Methods

arc

arc(pos, radius, startAngle, endAngle, detail?): void
Draws an arc (to the current path). For a circle, set startAngle to 0 and endAngle to Math.PI * 2
Parameters
- pos: Vector
  
  The center of the arc
- radius: number
  
  The radius of the arc
- startAngle: number
  
  The starting angle of the arc
- endAngle: number
  
  The ending angle of the arc
- detail: number = 1
  
  The detail of the arc. Higher values = smoother arc. Defaults to 1
Returns void
- Defined in core/Renderer.ts:392

beginPath

beginPath(): void
Starts a new path by clearing everything in the current path. Call this before using any drawing methods.

Returns void
- Defined in core/Renderer.ts:315

`Private` buildDashedPath

buildDashedPath(vertices, width, closed?, dashLength?, miterLimit): void
Parameters
- vertices: Vertex[]
- width: number
- closed: boolean = false
- dashLength: number = 10
- miterLimit: number
Returns void
- Defined in core/Renderer.ts:273

`Private` buildPath

buildPath(vertices, width, closed?, miterLimit): void
Parameters
- vertices: Vertex[]
- width: number
- closed: boolean = false
- miterLimit: number
Returns void
- Defined in core/Renderer.ts:219

clear

clear(color?): void
Clears the screen with the specified color
Parameters
- color: Color = ...
  
  The clear color
Returns void
- Defined in core/Renderer.ts:209

enableBlending

enableBlending(enable): void
Enables or disables blending
Parameters
- enable: boolean
  
  Whether to enable or disable blending
Returns void
- Defined in core/Renderer.ts:185

fill

fill(): void
Fills everything in the current path since the last beginPath() call with the specified color.

Returns void
- Defined in core/Renderer.ts:455

`Private` fillPath

fillPath(vertices): void
Parameters
- vertices: Vertex[]
Returns void
- Defined in core/Renderer.ts:481

fillText

fillText(text, pos): void
Parameters
- text: string
  
  The text to render
- pos: Vector
  
  The position to render the text at
Returns void
- Defined in core/Renderer.ts:546

getDisplaySize

getDisplaySize(): Vector
Returns the size of the canvas

Returns Vector
- Defined in core/Renderer.ts:653

getTextMetrics

getTextMetrics(text): TextMeasurements
Returns the width of the specified text using the current font and text renderer
Parameters
- text: string
  
  The text to measure
Returns TextMeasurements
The width of the text
- Defined in core/Renderer.ts:568

line

line(startPos, endPos): void
Draws a line.
Parameters
- startPos: Vector
  
  Starting position of the line
- endPos: Vector
  
  Ending position of the line
Returns void
- Defined in core/Renderer.ts:378

rect

rect(pos, size): void
Draws a rectangle (to the current path). Note that it does not close the path. So if you want to stroke() it, use the closed option in the stroke() method.
Parameters
- pos: Vector
  
  The position of the top left corner of the rectangle
- size: Vector
  
  The size (width and height) of the rectangle
Returns void
- Defined in core/Renderer.ts:416

render

render(): void
The main render function. Call this every frame once to render everything.

Returns void
- Defined in core/Renderer.ts:577

resetTransforms

resetTransforms(): void
Resets all transforms

Returns void
- Defined in core/Renderer.ts:646

resizeCanvas

resizeCanvas(width, height): void
Resizes the canvas to the specified width and height
Parameters
- width: number
- height: number
Returns void
- Defined in core/Renderer.ts:158

rotate

rotate(angle): void
Rotates the camera by the specified angle
Parameters
- angle: number
  
  The angle to rotate the camera by
Returns void
- Defined in core/Renderer.ts:619

scale

scale(scale): void
Scales up by the specified vector
Parameters
- scale: Vector
  
  The vector to scale the camera by
Returns void
- Defined in core/Renderer.ts:627
scale(x, y): void
Scales up by the specified x and y values
Parameters
- x: number
  
  The x value to scale the camera by
- y: number
  
  The y value to scale the camera by
Returns void
- Defined in core/Renderer.ts:633
scale(n): void
Scales uniformly by the specified value
Parameters
- n: number
  
  The value to scale the camera by
Returns void
- Defined in core/Renderer.ts:638

setBlendMode

setBlendMode(blendMode): void
Set Blend Mode
Parameters
- blendMode: BlendModes
Returns void
- Defined in core/Renderer.ts:194

setBuffer

setBuffer(buffer): void
Sets the current buffer to draw to
Parameters
- buffer: 0 | Buffer
  
  The buffer to draw to
Returns void
- Defined in core/Renderer.ts:168

setColor

setColor(color): void
Sets the default vertex color
Parameters
- color: Color
  
  The color to set
Returns void
- Defined in core/Renderer.ts:308

setFontFace

setFontFace(fontFace): void
Sets the font of the text renderer
Parameters
- fontFace: string
  
  The font to set
Returns void
Example
```
renderer.setFont("30px Arial");
```
- Defined in core/Renderer.ts:495

setFontSize

setFontSize(fontSize): void
Sets the font size of the text renderer
Parameters
- fontSize: number
  
  The font size to set
Returns void
Example
```
renderer.setFontSize(20);
```
- Defined in core/Renderer.ts:505

setLetterSpacing

setLetterSpacing(spacing): void
Sets the text align of the text renderer
Parameters
- spacing: string
Returns void
Example
```
renderer.setTextAlign("center");
```
- Defined in core/Renderer.ts:525

setTextAlign

setTextAlign(align): void
Sets the text align of the text renderer
Parameters
- align: CanvasTextAlign
  
  The text align to set
Returns void
Example
```
renderer.setTextAlign("center");
```
- Defined in core/Renderer.ts:515

setWordSpacing

setWordSpacing(spacing): void
Sets the text align of the text renderer
Parameters
- spacing: string
Returns void
Example
```
renderer.setTextAlign("center");
```
- Defined in core/Renderer.ts:535

splitPath

splitPath(): void
Splits the current path. Call this before using any drawing methods to start a new path without clearing the current one.

Returns void
- Defined in core/Renderer.ts:368

stroke

stroke(width, options?): void
Strokes (outlines) everything in the current path since the last beginPath() call with the specified width and options.
Parameters
- width: number
  
  The stroke width
- options: StrokePathOptions = {}
  
  Options for the stroke
Returns void
- Defined in core/Renderer.ts:426

strokeText

strokeText(text, pos, lineWidth?): void
Parameters
- text: string
  
  The text to render
- pos: Vector
  
  The position to render the text at
- lineWidth: number = 1
Returns void
- Defined in core/Renderer.ts:557

translate

translate(pos): void
Translates the camera by the specified vector
Parameters
- pos: Vector
  
  The vector to translate the camera by
Returns void
- Defined in core/Renderer.ts:604
translate(x, y): void
Translates the camera by the specified x and y values
Parameters
- x: number
  
  The x value to translate the camera by
- y: number
  
  The y value to translate the camera by
Returns void
- Defined in core/Renderer.ts:610

vertex

vertex(pos): void
Draws a vertex (to the current path).
Parameters
- pos: Vector
Returns void
- Defined in core/Renderer.ts:324
vertex(pos, color): void
Parameters
- pos: Vector
- color: Color
Returns void
- Defined in core/Renderer.ts:325
vertex(vertex): void
Parameters
- vertex: Vertex
Returns void
- Defined in core/Renderer.ts:326

vertices

vertices(positions, color): void
Draws vertices (to the current path).
Parameters
- positions: Vector[]
- color: Color
Returns void
- Defined in core/Renderer.ts:343
vertices(v): void
Draws vertices (to the current path).
Parameters
- v: Vector[]
Returns void
- Defined in core/Renderer.ts:348
vertices(vertices): void
Draws vertices (to the current path).
Parameters
- vertices: Vertex[]
  
  The list of vertices to draw
Returns void
- Defined in core/Renderer.ts:353

Class Renderer

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

options: RendererOptions

Returns Renderer

Properties

Private buffers

camera

canvas

Private currentBufferIndex

Private currentPath

gl

Private shaderProgramInfo

textRenderer

transform

vertexColor

Methods

arc

Parameters

pos: Vector

radius: number

startAngle: number

endAngle: number

detail: number = 1

Returns void

beginPath

Returns void

Private buildDashedPath

Parameters

vertices: Vertex[]

width: number

closed: boolean = false

dashLength: number = 10

miterLimit: number

Returns void

Private buildPath

Parameters

vertices: Vertex[]

width: number

closed: boolean = false

miterLimit: number

Returns void

clear

Parameters

color: Color = ...

Returns void

enableBlending

Parameters

enable: boolean

Returns void

fill

Returns void

Private fillPath

Parameters

vertices: Vertex[]

Returns void

fillText

Parameters

text: string

pos: Vector

Returns void

getDisplaySize

Returns Vector

getTextMetrics

Parameters

text: string

Returns TextMeasurements

line

Parameters

startPos: Vector

endPos: Vector

Returns void

rect

Parameters

`Private` buffers

`Private` currentBufferIndex

`Private` currentPath

`Private` shaderProgramInfo

`Private` buildDashedPath

`Private` buildPath

`Private` fillPath