Namespace: Draw

LittleJS Drawing System

Hybrid system with both Canvas2D and WebGL available
Super fast tile sheet rendering with WebGL
Can apply rotation, mirror, color and additive color
Font rendering system with built in engine font
Many useful utility functions

LittleJS uses a hybrid rendering solution with the best of both Canvas2D and WebGL. There are 3 canvas/contexts available to draw to... mainCanvas - 2D background canvas, non WebGL stuff like tile layers are drawn here. glCanvas - Used by the accelerated WebGL batch rendering system.

The WebGL rendering system is very fast with some caveats...

Switching blend modes (additive) or textures causes another draw call which is expensive in excess
Group additive rendering together using renderOrder to mitigate this issue

The LittleJS rendering solution is intentionally simple, feel free to adjust it for your needs!

Source: src/engineDraw.js, line 1

Classes

FontImage
TextureInfo
TileInfo

Members

(static) canvasClearColor :Color

Color to clear the canvas to before render, does not clear if alpha is 0

Type:

Color

Source: src/engineSettings.js, line 43

(static) drawContext :CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D

The default 2d context to use for drawing, usually mainContext

Type:

CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D

Source: src/engineDraw.js, line 37

(static) drawCount :number

Keeps track of how many draw calls there were each frame for debugging

Type:

number

Source: src/engineDraw.js, line 72

(static) engineFontImage :FontImage

Engine font image, 8x8 font provided by the engine

Type:

FontImage

Source: src/engineDraw.js, line 1003

(static) mainCanvas :HTMLCanvasElement

The primary 2D canvas visible to the user

Type:

HTMLCanvasElement

Source: src/engineDraw.js, line 27

(static) mainCanvasSize :Vector2

The size of the main canvas (and other secondary canvases)

Type:

Vector2

Source: src/engineDraw.js, line 62

(static) mainContext :CanvasRenderingContext2D

2d context for mainCanvas

Type:

CanvasRenderingContext2D

Source: src/engineDraw.js, line 32

(static) textureInfos :Array.<TextureInfo>

Array containing texture info for batch rendering system

Type:

Array.<TextureInfo>

Source: src/engineDraw.js, line 67

(static) workCanvas :OffscreenCanvas

Offscreen canvas that can be used for image processing

Type:

OffscreenCanvas

Source: src/engineDraw.js, line 42

(static) workContext :OffscreenCanvasRenderingContext2D

Offscreen canvas that can be used for image processing

Type:

OffscreenCanvasRenderingContext2D

Source: src/engineDraw.js, line 47

(static) workReadCanvas :OffscreenCanvas

Offscreen canvas with willReadFrequently that can be used for image processing

Type:

OffscreenCanvas

Source: src/engineDraw.js, line 52

(static) workReadContext :OffscreenCanvasRenderingContext2D

Offscreen canvas with willReadFrequently that can be used for image processing

Type:

OffscreenCanvasRenderingContext2D

Source: src/engineDraw.js, line 57

Methods

(static) CanvasLayer#draw(pos, sizeopt, coloropt, angleopt, mirroropt, additiveColoropt, screenSpaceopt, contextopt)

Draw this canvas layer centered in world space, with color applied if using WebGL

Parameters:

Name	Type	Attributes	Default	Description
`pos`	Vector2			Center in world space
`size`	Vector2	<optional>		Size in world space
`color`	Color	<optional>		Color to modulate with
`angle`	number	<optional>	0	Angle to rotate by
`mirror`	boolean	<optional>	false	If true image is flipped along the Y axis
`additiveColor`	Color	<optional>		Additive color to be applied if any
`screenSpace`	boolean	<optional>	false	If true the pos and size are in screen space
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>		Canvas 2D context to draw to

Source: src/engineTileLayer.js, line 234

(static) combineCanvases()

Combines LittleJS canvases onto the main canvas This is necessary for things like screenshots and video

Source: src/engineDraw.js, line 888

(static) drawCanvas2D(pos, size, angle, mirroropt, drawFunctionopt, screenSpaceopt, contextopt)

Draw directly to a 2d canvas context in world space

Parameters:

Name	Type	Attributes	Default
`pos`	Vector2
`size`	Vector2
`angle`	number		0
`mirror`	boolean	<optional>	false
`drawFunction`	Canvas2DDrawFunction	<optional>
`screenSpace`	boolean	<optional>	false
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>	drawContext

Source: src/engineDraw.js, line 628

(static) drawCircle(pos, sizeopt, coloropt, lineWidthopt, lineColoropt, useWebGLopt, screenSpaceopt, contextopt)

Draw colored circle using passed in point

Parameters:

Name	Type	Attributes	Default	Description
`pos`	Vector2
`size`	number	<optional>	1	Diameter
`color`	Color	<optional>	WHITE
`lineWidth`	number	<optional>	0
`lineColor`	Color	<optional>	BLACK
`useWebGL`	boolean	<optional>	glEnable
`screenSpace`	boolean	<optional>	false
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>

Source: src/engineDraw.js, line 607

(static) drawEllipse(pos, sizeopt, coloropt, angleopt, lineWidthopt, lineColoropt, useWebGLopt, screenSpaceopt, contextopt)

Draw colored ellipse using passed in point

Parameters:

Name	Type	Attributes	Default	Description
`pos`	Vector2
`size`	Vector2	<optional>	vec2(1)	Width and height diameter
`color`	Color	<optional>	WHITE
`angle`	number	<optional>	0
`lineWidth`	number	<optional>	0
`lineColor`	Color	<optional>	BLACK
`useWebGL`	boolean	<optional>	glEnable
`screenSpace`	boolean	<optional>	false
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>

Source: src/engineDraw.js, line 560

(static) drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, color, additiveColoropt, bleedopt)

Helper function to draw an image with color and additive color applied This is slower then normal drawImage when color is applied

Parameters:

Name	Type	Attributes	Default	Description
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D
`image`	HTMLImageElement \| OffscreenCanvas
`sx`	number
`sy`	number
`sWidth`	number
`sHeight`	number
`dx`	number
`dy`	number
`dWidth`	number
`dHeight`	number
`color`	Color
`additiveColor`	Color	<optional>
`bleed`	number	<optional>	0	How many pixels to shrink the source, used to fix bleeding

Source: src/engineDraw.js, line 915

(static) drawLine(posA, posB, widthopt, coloropt, posopt, angleopt, useWebGLopt, screenSpaceopt, contextopt)

Draw colored line between two points

Parameters:

Name	Type	Attributes	Default	Description
`posA`	Vector2
`posB`	Vector2
`width`	number	<optional>	0.1
`color`	Color	<optional>	WHITE
`pos`	Vector2	<optional>	vec2()	Offset to apply
`angle`	number	<optional>	0	Angle to rotate by
`useWebGL`	boolean	<optional>	glEnable
`screenSpace`	boolean	<optional>
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>

Source: src/engineDraw.js, line 460

(static) drawLineList(points, widthopt, coloropt, wrapopt, posopt, angleopt, useWebGLopt, screenSpaceopt, contextopt)

Draw connected lines between a series of points

Parameters:

Name	Type	Attributes	Default	Description
`points`	Array.<Vector2>
`width`	number	<optional>	0.1
`color`	Color	<optional>	WHITE
`wrap`	boolean	<optional>	false	Should the last point connect to the first?
`pos`	Vector2	<optional>	vec2()	Offset to apply
`angle`	number	<optional>	0	Angle to rotate by
`useWebGL`	boolean	<optional>	glEnable
`screenSpace`	boolean	<optional>
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>

Source: src/engineDraw.js, line 412

(static) drawPoly(points, coloropt, lineWidthopt, lineColoropt, posopt, angleopt, useWebGLopt, screenSpaceopt, contextopt)

Draw colored polygon using passed in points

Parameters:

Name	Type	Attributes	Default	Description
`points`	Array.<Vector2>			Array of Vector2 points
`color`	Color	<optional>	WHITE
`lineWidth`	number	<optional>	0
`lineColor`	Color	<optional>	BLACK
`pos`	Vector2	<optional>	vec2()	Offset to apply
`angle`	number	<optional>	0	Angle to rotate by
`useWebGL`	boolean	<optional>	glEnable
`screenSpace`	boolean	<optional>	false
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>

Source: src/engineDraw.js, line 510

(static) drawRect(pos, sizeopt, coloropt, angleopt, useWebGLopt, screenSpaceopt, contextopt)

Draw colored rect centered on pos

Parameters:

Name	Type	Attributes	Default
`pos`	Vector2
`size`	Vector2	<optional>	vec2(1)
`color`	Color	<optional>	WHITE
`angle`	number	<optional>
`useWebGL`	boolean	<optional>	glEnable
`screenSpace`	boolean	<optional>
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>

Source: src/engineDraw.js, line 333

(static) drawRectGradient(pos, sizeopt, colorTopopt, colorBottomopt, angleopt, useWebGLopt, screenSpaceopt, contextopt)

Draw a rect centered on pos with a gradient from top to bottom

Parameters:

Name	Type	Attributes	Default
`pos`	Vector2
`size`	Vector2	<optional>	vec2(1)
`colorTop`	Color	<optional>	WHITE
`colorBottom`	Color	<optional>	BLACK
`angle`	number	<optional>	0
`useWebGL`	boolean	<optional>	glEnable
`screenSpace`	boolean	<optional>	false
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>

Source: src/engineDraw.js, line 348

(static) drawRegularPoly(pos, sizeopt, sidesopt, coloropt, angleopt, lineWidthopt, lineColoropt, useWebGLopt, screenSpaceopt, contextopt)

Draw colored regular polygon using passed in number of sides

Parameters:

Name	Type	Attributes	Default
`pos`	Vector2
`size`	Vector2	<optional>	vec2(1)
`sides`	number	<optional>	3
`color`	Color	<optional>	WHITE
`angle`	number	<optional>	0
`lineWidth`	number	<optional>
`lineColor`	Color	<optional>	BLACK
`useWebGL`	boolean	<optional>	glEnable
`screenSpace`	boolean	<optional>
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>

Source: src/engineDraw.js, line 483

(static) drawText(text, pos, sizeopt, coloropt, lineWidthopt, lineColoropt, textAlignopt, fontopt, fontStyleopt, maxWidthopt, angleopt, contextopt)

Draw text on main canvas in world space Automatically splits new lines into rows

Parameters:

Name	Type	Attributes	Default
`text`	string \| number
`pos`	Vector2
`size`	number	<optional>	1
`color`	Color	<optional>	WHITE
`lineWidth`	number	<optional>	0
`lineColor`	Color	<optional>	BLACK
`textAlign`	CanvasTextAlign	<optional>	'center'
`font`	string	<optional>	fontDefault
`fontStyle`	string	<optional>
`maxWidth`	number	<optional>
`angle`	number	<optional>	0
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>	drawContext

Source: src/engineDraw.js, line 667

(static) drawTextScreen(text, pos, size, coloropt, lineWidthopt, lineColoropt, textAlignopt, fontopt, fontStyleopt, maxWidthopt, angleopt, contextopt)

Draw text in screen space Automatically splits new lines into rows

Parameters:

Name	Type	Attributes	Default
`text`	string \| number
`pos`	Vector2
`size`	number
`color`	Color	<optional>	WHITE
`lineWidth`	number	<optional>	0
`lineColor`	Color	<optional>	BLACK
`textAlign`	CanvasTextAlign	<optional>	center
`font`	string	<optional>	fontDefault
`fontStyle`	string	<optional>
`maxWidth`	number	<optional>
`angle`	number	<optional>	0
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>	drawContext

Source: src/engineDraw.js, line 694

(static) drawTile(pos, sizeopt, tileInfoopt, coloropt, angleopt, mirroropt, additiveColoropt, useWebGLopt, screenSpaceopt, contextopt)

Draw textured tile centered in world space

Parameters:

Name	Type	Attributes	Default	Description
`pos`	Vector2			Center of the tile in world space
`size`	Vector2	<optional>	vec2(1)	Size of the tile in world space
`tileInfo`	TileInfo	<optional>		Tile info to use, untextured if undefined
`color`	Color	<optional>	WHITE	Color to modulate with
`angle`	number	<optional>	0	Angle to rotate by
`mirror`	boolean	<optional>		Is image flipped along the Y axis?
`additiveColor`	Color	<optional>		Additive color to be applied if any
`useWebGL`	boolean	<optional>	glEnable	Use accelerated WebGL rendering?
`screenSpace`	boolean	<optional>	false	Are the pos and size are in screen space?
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>		Canvas 2D context to draw to

Source: src/engineDraw.js, line 251

(static) getCameraSize() → {Vector2}

Get the size of the camera window in world space

Source: src/engineDraw.js, line 838

Returns:

Type:: Vector2

(static) isFullscreen() → {boolean}

Returns true if fullscreen mode is active

Source: src/engineDraw.js, line 973

Returns:

Type:: boolean

(static) isOnScreen(pos, size) → {boolean}

Check if a box, point, or circle is on screen with a circle test If size is a Vector2, uses the length as diameter This can be used to cull offscreen objects from render or update

Parameters:

Name	Type	Default	Description
`pos`	Vector2		world space position
`size`	Vector2 \| number	0	world space size or diameter

Source: src/engineDraw.js, line 847

Returns:

Type:: boolean

(static) screenToWorld(screenPos) → {Vector2}

Convert from screen to world space coordinates

Parameters:

Name	Type	Description
`screenPos`	Vector2

Source: src/engineDraw.js, line 736

Returns:

Type:: Vector2

(static) screenToWorldDelta(screenDelta) → {Vector2}

Convert from screen to world space coordinates for a directional vector (no translation)

Parameters:

Name	Type	Description
`screenDelta`	Vector2

Source: src/engineDraw.js, line 780

Returns:

Type:: Vector2

(static) screenToWorldTransform(screenPos, screenSize, screenAngleopt)

Convert screen space transform to world space

Parameters:

Name	Type	Attributes	Default
`screenPos`	Vector2
`screenSize`	Vector2
`screenAngle`	number	<optional>	0

Source: src/engineDraw.js, line 822

Returns:

(static) setBlendMode(additiveopt, contextopt)

Enable normal or additive blend mode

Parameters:

Name	Type	Attributes	Default	Description
`additive`	boolean	<optional>	false
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>

Source: src/engineDraw.js, line 879

(static) setCursor(cursorStyleopt)

Set the cursor style

Parameters:

Name	Type	Attributes	Default	Description
`cursorStyle`	string	<optional>	auto	CSS cursor style (auto, none, crosshair, etc)

Source: src/engineDraw.js, line 992

(static) tile(indexopt, sizeopt, textureopt, paddingopt, bleedopt) → {TileInfo}

Create a tile info object using a grid based system

This can take vecs or floats for easier use and conversion
If an index is passed in, the tile size and index will determine the position

Parameters:

Name	Type	Attributes	Default	Description
`index`	Vector2 \| number	<optional>	0	Index of the tile in 1d or 2d form
`size`	Vector2 \| number	<optional>		Size of tile in pixels
`texture`	TextureInfo \| number	<optional>	0	Texture index or info to use
`padding`	number	<optional>		How many pixels padding around tiles
`bleed`	number	<optional>		How many pixels smaller to draw tiles

Source: src/engineDraw.js, line 92

Returns:

Type:: TileInfo

Example

tile(2)                       // a tile at index 2 using the default tile size of 16
tile(5, 8)                    // a tile at index 5 using a tile size of 8
tile(1, 16, 3)                // a tile at index 1 of size 16 on texture 3
tile(vec2(4,8), vec2(30,10))  // a tile at index (4,8) with a size of (30,10)

(static) toggleFullscreen()

Toggle fullscreen mode

Source: src/engineDraw.js, line 977

(static) worldToScreen(worldPos) → {Vector2}

Convert from world to screen space coordinates

Parameters:

Name	Type	Description
`worldPos`	Vector2

Source: src/engineDraw.js, line 756

Returns:

Type:: Vector2

(static) worldToScreenDelta(worldDelta) → {Vector2}

Convert from screen to world space coordinates for a directional vector (no translation)

Parameters:

Name	Type	Description
`worldDelta`	Vector2

Source: src/engineDraw.js, line 800

Returns:

Type:: Vector2

Type Definitions

Canvas2DDrawFunction(context)

Parameters:

Name	Type	Description
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D

Source: src/engineDraw.js, line 613

LineTestFunction(pos)

Parameters:

Name	Type	Description
`pos`	Vector2

Source: src/engineMath.js, line 283