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
- HTMLCanvasElement
- Source
(static) mainCanvasSize :Vector2
The size of the main canvas (and other secondary canvases)
- Source
(static) mainContext :CanvasRenderingContext2D
2d context for mainCanvas
- CanvasRenderingContext2D
- Source
(static) overlayCanvas :HTMLCanvasElement
A canvas that appears on top of everything the same size as mainCanvas
- HTMLCanvasElement
- Source
(static) overlayContext :CanvasRenderingContext2D
2d context for overlayCanvas
- CanvasRenderingContext2D
- Source
(static, constant) tileImage :CanvasImageSource
Tile sheet for batch rendering system
- CanvasImageSource
- Source
Methods
(static) drawCanvas2D(pos, size, angle, mirror, drawFunction, contextopt)
Draw directly to a 2d canvas context in world space
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
pos | Vector2 | |||
size | Vector2 | |||
angle | Number | |||
mirror | Boolean | |||
drawFunction | function | |||
context | CanvasRenderingContext2D | <optional> | mainContext |
- Source
(static) drawLine(posA, posB, thicknessopt, coloropt, useWebGLopt)
Draw colored line between two points
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
posA | Vector2 | |||
posB | Vector2 | |||
thickness | Number | <optional> | .1 | |
color | Color | <optional> | Color() | |
useWebGL | Boolean | <optional> | glEnable |
- Source
(static) drawRect(pos, sizeopt, coloropt, angleopt, useWebGLopt)
Draw colored rect centered on pos
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
pos | Vector2 | |||
size | Vector2 | <optional> | Vector2(1,1) | |
color | Color | <optional> | Color() | |
angle | Number | <optional> | 0 | |
useWebGL | Boolean | <optional> | glEnable |
- Source
(static) drawRectScreenSpace(pos, sizeopt, coloropt, angleopt, useWebGLopt)
Draw colored rectangle in screen space
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
pos | Vector2 | |||
size | Vector2 | <optional> | Vector2(1,1) | |
color | Color | <optional> | Color() | |
angle | Number | <optional> | 0 | |
useWebGL | Boolean | <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
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
text | String | |||
pos | Vector2 | |||
size | Number | <optional> | 1 | |
color | Color | <optional> | Color() | |
lineWidth | Number | <optional> | 0 | |
lineColor | Color | <optional> | Color(0,0,0) | |
textAlign | String | <optional> | 'center' | |
font | String | <optional> | fontDefault | |
context | CanvasRenderingContext2D | <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
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
text | String | |||
pos | Vector2 | |||
size | Number | <optional> | 1 | |
color | Color | <optional> | Color() | |
lineWidth | Number | <optional> | 0 | |
lineColor | Color | <optional> | Color(0,0,0) | |
textAlign | String | <optional> | 'center' | |
font | String | <optional> | fontDefault | |
context | CanvasRenderingContext2D | <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
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
pos | Vector2 | Center of the tile in world space | ||
size | Vector2 | <optional> | Vector2(1,1) | Size of the tile in world space |
tileIndex | Number | <optional> | -1 | Tile index to use, negative is untextured |
tileSize | Vector2 | <optional> | tileSizeDefault | Tile size in source pixels |
color | Color | <optional> | Color() | 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> | Color(0,0,0,0) | Additive color to be applied |
useWebGL | Boolean | <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
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
pos | Vector2 | Center of the tile | ||
size | Vector2 | <optional> | 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> | Color() | |
angle | Number | <optional> | 0 | |
mirror | Boolean | <optional> | 0 | |
additiveColor | Color | <optional> | Color(0,0,0,0) | |
useWebGL | Boolean | <optional> | glEnable |
- Source
(static) isFullscreen() → {Boolean}
Returns true if fullscreen mode is active
- Source
- 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
Name | Type | Description |
---|---|---|
screenPos | Vector2 |
- Source
- Type:
- Vector2
(static) setBlendMode(additiveopt, useWebGLopt)
Enable normal or additive blend mode
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
additive | Boolean | <optional> | 0 | |
useWebGL | Boolean | <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
Name | Type | Description |
---|---|---|
worldPos | Vector2 |
- Source
- Type:
- Vector2