Draw

LittleJS Drawing System
- Hybrid with both Canvas2D and WebGL available
- Super fast tile sheet rendering with WebGL
- Can apply rotation, mirror, color and additive color
- 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...
- The default setup supports only 1 tile sheet, to support more call glCreateTexture and glSetTexture
- 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

Members

(static) mainCanvas :HTMLCanvasElement

The primary 2D canvas visible to the user

Type:
  • HTMLCanvasElement
Source

(static) mainCanvasSize :Vector2

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

Type:
Source

(static) mainContext :CanvasRenderingContext2D

2d context for mainCanvas

Type:
  • CanvasRenderingContext2D
Source

(static) overlayCanvas :HTMLCanvasElement

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

Type:
  • HTMLCanvasElement
Source

(static) overlayContext :CanvasRenderingContext2D

2d context for overlayCanvas

Type:
  • CanvasRenderingContext2D
Source

(static, constant) tileImage :CanvasImageSource

Tile sheet for batch rendering system

Type:
  • CanvasImageSource
Source

Methods

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

Draw directly to a 2d canvas context in world space

Parameters:
NameTypeAttributesDefaultDescription
posVector2
sizeVector2
angleNumber
mirrorBoolean
drawFunctionfunction
contextCanvasRenderingContext2D<optional>
mainContext
Source

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

Draw colored line between two points

Parameters:
NameTypeAttributesDefaultDescription
posAVector2
posBVector2
thicknessNumber<optional>
.1
colorColor<optional>
Color()
useWebGLBoolean<optional>
glEnable
Source

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

Draw colored rect centered on pos

Parameters:
NameTypeAttributesDefaultDescription
posVector2
sizeVector2<optional>
Vector2(1,1)
colorColor<optional>
Color()
angleNumber<optional>
0
useWebGLBoolean<optional>
glEnable
Source

(static) drawRectScreenSpace(pos, sizeopt, coloropt, angleopt, useWebGLopt)

Draw colored rectangle in screen space

Parameters:
NameTypeAttributesDefaultDescription
posVector2
sizeVector2<optional>
Vector2(1,1)
colorColor<optional>
Color()
angleNumber<optional>
0
useWebGLBoolean<optional>
glEnable
Source

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

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

Parameters:
NameTypeAttributesDefaultDescription
textString
posVector2
sizeNumber<optional>
1
colorColor<optional>
Color()
lineWidthNumber<optional>
0
lineColorColor<optional>
Color(0,0,0)
textAlignString<optional>
'center'
fontString<optional>
fontDefault
contextCanvasRenderingContext2D<optional>
overlayContext
Source

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

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

Parameters:
NameTypeAttributesDefaultDescription
textString
posVector2
sizeNumber<optional>
1
colorColor<optional>
Color()
lineWidthNumber<optional>
0
lineColorColor<optional>
Color(0,0,0)
textAlignString<optional>
'center'
fontString<optional>
fontDefault
contextCanvasRenderingContext2D<optional>
overlayContext
Source

(static) drawTile(pos, sizeopt, tileIndexopt, tileSizeopt, coloropt, angleopt, mirroropt, additiveColoropt, useWebGLopt)

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

Parameters:
NameTypeAttributesDefaultDescription
posVector2

Center of the tile in world space

sizeVector2<optional>
Vector2(1,1)

Size of the tile in world space

tileIndexNumber<optional>
-1

Tile index to use, negative is untextured

tileSizeVector2<optional>
tileSizeDefault

Tile size in source pixels

colorColor<optional>
Color()

Color to modulate with

angleNumber<optional>
0

Angle to rotate by

mirrorBoolean<optional>
0

If true image is flipped along the Y axis

additiveColorColor<optional>
Color(0,0,0,0)

Additive color to be applied

useWebGLBoolean<optional>
glEnable

Use accelerated WebGL rendering

Source

(static) drawTileScreenSpace(pos, sizeopt, tileIndexopt, tileSizeopt, coloropt, angleopt, mirroropt, additiveColoropt, useWebGLopt)

Draw textured tile centered on pos in screen space

Parameters:
NameTypeAttributesDefaultDescription
posVector2

Center of the tile

sizeVector2<optional>
Vector2(1,1)

Size of the tile

tileIndexNumber<optional>
-1

Tile index to use, negative is untextured

tileSizeVector2<optional>
tileSizeDefault

Tile size in source pixels

colorColor<optional>
Color()
angleNumber<optional>
0
mirrorBoolean<optional>
0
additiveColorColor<optional>
Color(0,0,0,0)
useWebGLBoolean<optional>
glEnable
Source

(static) isFullscreen() → {Boolean}

Returns true if fullscreen mode is active

Source
Returns:
Type: 
Boolean

(static) screenToWorld(screenPos) → {Vector2}

Convert from screen to world space coordinates

  • if calling outside of render, you may need to manually set mainCanvasSize
Parameters:
NameTypeDescription
screenPosVector2
Source
Returns:
Type: 
Vector2

(static) setBlendMode(additiveopt, useWebGLopt)

Enable normal or additive blend mode

Parameters:
NameTypeAttributesDefaultDescription
additiveBoolean<optional>
0
useWebGLBoolean<optional>
glEnable
Source

(static) toggleFullscreen()

Toggle fullsceen mode

Source

(static) worldToScreen(worldPos) → {Vector2}

Convert from world to screen space coordinates

  • if calling outside of render, you may need to manually set mainCanvasSize
Parameters:
NameTypeDescription
worldPosVector2
Source
Returns:
Type: 
Vector2