Namespace: Draw

LittleJS Drawing System

Hybrid rendering with both Canvas2D and WebGL support
Optimized tile sheet sprite rendering using WebGL batching
Primitive drawing for polygons, ellipses, and lines
Tile-based rendering with TileInfo and TextureInfo classes
Text rendering with custom fonts and FontImage support
Color and additive color blending for effects
Rotation, mirroring, and scaling transformations
Camera system with position, scale, and rotation
Multiple canvas support (main, WebGL, work canvases)
Gradient fills and outlined shapes
Image manipulation and color tinting

Rendering Architecture:

glCanvas: WebGL canvas for accelerated sprite batch rendering
mainCanvas: Canvas2D overlay for text, UI, and custom drawing
All draw functions default to WebGL when enabled, can force Canvas2D with useWebGL parameter

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 38

(static) drawCount :number

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

Type:

number

Source: src/engineDraw.js, line 73

(static) engineFontImage :FontImage

Engine font image, 8x8 font provided by the engine

Type:

FontImage

Source: src/engineDraw.js, line 1029

(static) mainCanvas :HTMLCanvasElement

The primary 2D canvas visible to the user

Type:

HTMLCanvasElement

Source: src/engineDraw.js, line 28

(static) mainCanvasSize :Vector2

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

Type:

Vector2

Source: src/engineDraw.js, line 63

(static) mainContext :CanvasRenderingContext2D

2d context for mainCanvas

Type:

CanvasRenderingContext2D

Source: src/engineDraw.js, line 33

(static) textureInfos :Array.<TextureInfo>

Array containing texture info for batch rendering system

Type:

Array.<TextureInfo>

Source: src/engineDraw.js, line 68

(static) workCanvas :OffscreenCanvas

Offscreen canvas that can be used for image processing

Type:

OffscreenCanvas

Source: src/engineDraw.js, line 43

(static) workContext :OffscreenCanvasRenderingContext2D

Offscreen canvas that can be used for image processing

Type:

OffscreenCanvasRenderingContext2D

Source: src/engineDraw.js, line 48

(static) workReadCanvas :OffscreenCanvas

Offscreen canvas with willReadFrequently that can be used for image processing

Type:

OffscreenCanvas

Source: src/engineDraw.js, line 53

(static) workReadContext :OffscreenCanvasRenderingContext2D

Offscreen canvas with willReadFrequently that can be used for image processing

Type:

OffscreenCanvasRenderingContext2D

Source: src/engineDraw.js, line 58

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 250

(static) combineCanvases()

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

Source: src/engineDraw.js, line 914

(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 629

(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 608

(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 561

(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 941

(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 461

(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 413

(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 511

(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 334

(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 349

(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 484

(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 668

(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 695

(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 252

(static) getCameraSize() → {Vector2}

Get the size of the camera window in world space

Source: src/engineDraw.js, line 864

Returns:

Type:: Vector2

(static) isFullscreen() → {boolean}

Returns true if fullscreen mode is active

Source: src/engineDraw.js, line 999

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 873

Returns:

Type:: boolean

(async, static) loadTexture(textureIndex, srcopt) → {Promise}

Load a texture at a specific index

Parameters:

Name	Type	Attributes	Description
`textureIndex`	number		Index to store the texture at
`src`	string	<optional>	Image source path

Source: src/engineDraw.js, line 738

Returns:

Promise that resolves when texture is loaded

Type:: Promise

(static) screenToWorld(screenPos) → {Vector2}

Convert from screen to world space coordinates

Parameters:

Name	Type	Description
`screenPos`	Vector2

Source: src/engineDraw.js, line 762

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 806

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 848

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 905

(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 1018

(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 93

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 1003

(static) worldToScreen(worldPos) → {Vector2}

Convert from world to screen space coordinates

Parameters:

Name	Type	Description
`worldPos`	Vector2

Source: src/engineDraw.js, line 782

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 826

Returns:

Type:: Vector2

Type Definitions

Canvas2DDrawFunction(context)

Parameters:

Name	Type	Description
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D

Source: src/engineDraw.js, line 614

LineTestFunction(pos)

Parameters:

Name	Type	Description
`pos`	Vector2

Source: src/engineMath.js, line 292