Draw

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!

Members

# (static) mainCanvas :HTMLCanvasElement

The primary 2D canvas visible to the user
Type:
  • HTMLCanvasElement

# (static) mainCanvasSize :Vector2

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

# (static) mainContext :CanvasRenderingContext2D

2d context for mainCanvas
Type:
  • CanvasRenderingContext2D

# (static) overlayCanvas :HTMLCanvasElement

A canvas that appears on top of everything the same size as mainCanvas
Type:
  • HTMLCanvasElement

# (static) overlayContext :CanvasRenderingContext2D

2d context for overlayCanvas
Type:
  • CanvasRenderingContext2D

# (static, constant) tileImage :Image

Tile sheet for batch rendering system
Type:
  • Image

Methods

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

Draw directly to a 2d canvas context in world space
Parameters:
Name Type Attributes Default Description
pos Vector2
size Vector2
angle Number
mirror Boolean
drawFunction function
context CanvasRenderingContext2D <optional>
mainContext

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

Draw colored line between two points
Parameters:
Name Type Attributes Default Description
posA Vector2
posB Vector2
thickness Number <optional>
.1
color Color <optional>
new Color(1,1,1)
useWebGL Boolean <optional>
glEnable

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

Draw colored rect centered on pos
Parameters:
Name Type Attributes Default Description
pos Vector2
size Vector2 <optional>
new Vector2(1,1)
color Color <optional>
new Color(1,1,1)
angle Number <optional>
0
useWebGL Boolean <optional>
glEnable

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

Draw colored rectangle in screen space
Parameters:
Name Type Attributes Default Description
pos Vector2
size Vector2 <optional>
new Vector2(1,1)
color Color <optional>
new Color(1,1,1)
angle Number <optional>
0
useWebGL Boolean <optional>
glEnable

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

Draw text on overlay canvas in world space Automatically splits new lines into rows
Parameters:
Name Type Attributes Default Description
text String
pos Vector2
size Number <optional>
1
color Color <optional>
new Color(1,1,1)
lineWidth Number <optional>
0
lineColor Color <optional>
new Color(0,0,0)
textAlign String <optional>
'center'

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

Draw text on overlay canvas in screen space Automatically splits new lines into rows
Parameters:
Name Type Attributes Default Description
text String
pos Vector2
size Number <optional>
1
color Color <optional>
new Color(1,1,1)
lineWidth Number <optional>
0
lineColor Color <optional>
new Color(0,0,0)
textAlign String <optional>
'center'

# (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:
Name Type Attributes Default Description
pos Vector2 Center of the tile in world space
size Vector2 <optional>
new Vector2(1,1) Size of the tile in world space, width and height
tileIndex Number <optional>
-1 Tile index to use, negative is untextured
tileSize Vector2 <optional>
tileSizeDefault Tile size in source pixels
color Color <optional>
new Color(1,1,1) Color to modulate with
angle Number <optional>
0 Angle to rotate by
mirror Boolean <optional>
0 If true image is flipped along the Y axis
additiveColor Color <optional>
new Color(0,0,0,0) Additive color to be applied
useWebGL Boolean <optional>
glEnable Use accelerated WebGL rendering

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

Draw textured tile centered on pos in screen space
Parameters:
Name Type Attributes Default Description
pos Vector2 Center of the tile
size Vector2 <optional>
new Vector2(1,1) Size of the tile
tileIndex Number <optional>
-1 Tile index to use, negative is untextured
tileSize Vector2 <optional>
tileSizeDefault Tile size in source pixels
color Color <optional>
new Color
angle Number <optional>
0
mirror Boolean <optional>
0
additiveColor Color <optional>
new Color(0,0,0,0)
useWebGL Boolean <optional>
glEnable

# (static) isFullscreen() → {Boolean}

Returns true if fullscreen mode is active
Returns:
Type
Boolean

# (static) screenToWorld(screenPos) → {Vector2}

Convert from screen to world space coordinates
Parameters:
Name Type Description
screenPos Vector2
Returns:
Type
Vector2

# (static) setBlendMode(additiveopt, useWebGLopt)

Enable normal or additive blend mode
Parameters:
Name Type Attributes Default Description
additive Boolean <optional>
0
useWebGL Boolean <optional>
glEnable

# (static) toggleFullscreen()

Toggle fullsceen mode

# (static) worldToScreen(worldPos) → {Vector2}

Convert from world to screen space coordinates
Parameters:
Name Type Description
worldPos Vector2
Returns:
Type
Vector2