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. overlayCanvas - Another 2D canvas that appears on top of the other 2 canvases.

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: engineDraw.js, line 1

Members

(static) mainCanvas :HTMLCanvasElement

The primary 2D canvas visible to the user

Type:

HTMLCanvasElement

Source: engineDraw.js, line 28

(static) mainCanvasSize :Vector2

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

Type:

Vector2

Source: engineDraw.js, line 48

(static) mainContext :CanvasRenderingContext2D

2d context for mainCanvas

Type:

CanvasRenderingContext2D

Source: engineDraw.js, line 33

(static) overlayCanvas :HTMLCanvasElement

A canvas that appears on top of everything the same size as mainCanvas

Type:

HTMLCanvasElement

Source: engineDraw.js, line 38

(static) overlayContext :CanvasRenderingContext2D

2d context for overlayCanvas

Type:

CanvasRenderingContext2D

Source: engineDraw.js, line 43

(static) textureInfos :Array.<TextureInfo>

Array containing texture info for batch rendering system

Type:

Array.<TextureInfo>

Source: engineDraw.js, line 53

Methods

(static) drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpaceopt, contextopt)

Draw directly to a 2d canvas context in world space

Parameters:

Name	Type	Attributes	Default
`pos`	Vector2
`size`	Vector2
`angle`	Number
`mirror`	Boolean
`drawFunction`	function
`screenSpace`	Boolean	<optional>	false
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>	mainContext

Source: engineDraw.js, line 384

(static) drawCircle(pos, radiusopt, coloropt, lineWidthopt, lineColoropt, screenSpaceopt, contextopt)

Draw colored circle using passed in point

Parameters:

Name	Type	Attributes	Default
`pos`	Vector2
`radius`	Number	<optional>	1
`color`	Color	<optional>	(1,1,1,1)
`lineWidth`	Number	<optional>	0
`lineColor`	Color	<optional>	(0,0,0,1)
`screenSpace`	Boolean	<optional>	false
`context`	CanvasRenderingContext2D	<optional>	mainContext

Source: engineDraw.js, line 372

(static) drawEllipse(pos, widthopt, heightopt, angleopt, coloropt, lineWidthopt, lineColoropt, screenSpaceopt, contextopt)

Draw colored ellipse using passed in point

Parameters:

Name	Type	Attributes	Default
`pos`	Vector2
`width`	Number	<optional>	1
`height`	Number	<optional>	1
`angle`	Number	<optional>	0
`color`	Color	<optional>	(1,1,1,1)
`lineWidth`	Number	<optional>	0
`lineColor`	Color	<optional>	(0,0,0,1)
`screenSpace`	Boolean	<optional>	false
`context`	CanvasRenderingContext2D	<optional>	mainContext

Source: engineDraw.js, line 342

(static) drawLine(posA, posB, thicknessopt, coloropt, useWebGLopt, screenSpaceopt, contextopt)

Draw colored line between two points

Parameters:

Name	Type	Attributes	Default
`posA`	Vector2
`posB`	Vector2
`thickness`	Number	<optional>	0.1
`color`	Color	<optional>	(1,1,1,1)
`useWebGL`	Boolean	<optional>	glEnable
`screenSpace`	Boolean	<optional>	false
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>

Source: engineDraw.js, line 300

(static) drawPoly(points, coloropt, lineWidthopt, lineColoropt, screenSpaceopt, contextopt)

Draw colored polygon using passed in points

Parameters:

Name	Type	Attributes	Default	Description
`points`	Array			Array of Vector2 points
`color`	Color	<optional>	(1,1,1,1)
`lineWidth`	Number	<optional>	0
`lineColor`	Color	<optional>	(0,0,0,1)
`screenSpace`	Boolean	<optional>	false
`context`	CanvasRenderingContext2D	<optional>	mainContext

Source: engineDraw.js, line 315

(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>	(1,1)
`color`	Color	<optional>	(1,1,1,1)
`angle`	Number	<optional>
`useWebGL`	Boolean	<optional>	glEnable
`screenSpace`	Boolean	<optional>	false
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>

Source: engineDraw.js, line 286

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

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

Parameters:

Name	Type	Attributes	Default
`text`	String
`pos`	Vector2
`size`	Number	<optional>	1
`color`	Color	<optional>	(1,1,1,1)
`lineWidth`	Number	<optional>	0
`lineColor`	Color	<optional>	(0,0,0,1)
`textAlign`	CanvasTextAlign	<optional>	'center'
`font`	String	<optional>	fontDefault
`maxWidth`	Number	<optional>
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>	mainContext

Source: engineDraw.js, line 431

(static) drawTextOverlay(text, pos, sizeopt, coloropt, lineWidthopt, lineColoropt, textAlignopt, fontopt, maxWidthopt)

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

Parameters:

Name	Type	Attributes	Default
`text`	String
`pos`	Vector2
`size`	Number	<optional>	1
`color`	Color	<optional>	(1,1,1,1)
`lineWidth`	Number	<optional>	0
`lineColor`	Color	<optional>	(0,0,0,1)
`textAlign`	CanvasTextAlign	<optional>	'center'
`font`	String	<optional>	fontDefault
`maxWidth`	Number	<optional>

Source: engineDraw.js, line 448

(static) drawTextScreen(text, pos, sizeopt, coloropt, lineWidthopt, lineColoropt, textAlignopt, fontopt, maxWidthopt, contextopt)

Draw text on overlay canvas in screen space Automatically splits new lines into rows

Parameters:

Name	Type	Attributes	Default
`text`	String
`pos`	Vector2
`size`	Number	<optional>	1
`color`	Color	<optional>	(1,1,1,1)
`lineWidth`	Number	<optional>	0
`lineColor`	Color	<optional>	(0,0,0,1)
`textAlign`	CanvasTextAlign	<optional>	center
`font`	String	<optional>	fontDefault
`maxWidth`	Number	<optional>
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>	overlayContext

Source: engineDraw.js, line 466

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

Draw textured tile centered in world space, with color applied if using WebGL

Parameters:

Name	Type	Attributes	Default	Description
`pos`	Vector2			Center of the tile in world space
`size`	Vector2	<optional>	(1,1)	Size of the tile in world space
`tileInfo`	TileInfo	<optional>		Tile info to use, untextured if undefined
`color`	Color	<optional>	(1,1,1,1)	Color to modulate with
`angle`	Number	<optional>	0	Angle to rotate by
`mirror`	Boolean	<optional>		If true image is flipped along the Y axis
`additiveColor`	Color	<optional>	(0,0,0,0)	Additive color to be applied
`useWebGL`	Boolean	<optional>	glEnable	Use accelerated WebGL rendering
`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: engineDraw.js, line 211

(static) getCameraSize() → {Vector2}

Get the camera's visible area in world space

Source: engineDraw.js, line 197

Returns:

Type:: Vector2

(static) isFullscreen() → {Boolean}

Returns true if fullscreen mode is active

Source: engineDraw.js, line 576

Returns:

Type:: Boolean

(static) screenToWorld(screenPos) → {Vector2}

Convert from screen to world space coordinates

Parameters:

Name	Type	Description
`screenPos`	Vector2

Source: engineDraw.js, line 172

Returns:

Type:: Vector2

(static) setBlendMode(additiveopt, useWebGLopt, contextopt)

Enable normal or additive blend mode

Parameters:

Name	Type	Attributes	Default
`additive`	Boolean	<optional>
`useWebGL`	Boolean	<optional>	glEnable
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>	mainContext

Source: engineDraw.js, line 405

(static) setCursor(cursorStyle)

Set the cursor style

Parameters:

Name	Type	Default	Description
`cursorStyle`	String	auto	CSS cursor style (auto, none, crosshair, etc)

Source: engineDraw.js, line 595

(static) tile(posopt, sizeopt, textureIndexopt, paddingopt) → {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
`pos`	Number \| Vector2	<optional>	0	Index of tile in sheet
`size`	Number \| Vector2	<optional>	tileSizeDefault	Size of tile in pixels
`textureIndex`	Number	<optional>	0	Texture index to use
`padding`	Number	<optional>	0	How many pixels padding around tiles

Source: engineDraw.js, line 76

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: engineDraw.js, line 580

(static) worldToScreen(worldPos) → {Vector2}

Convert from world to screen space coordinates

Parameters:

Name	Type	Description
`worldPos`	Vector2

Source: engineDraw.js, line 185

Returns:

Type:: Vector2