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
- 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
- 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 :Image
Tile sheet for batch rendering system
Type:
- Image
- Source:
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 |
- Source:
# (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 |
- Source:
# (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 |
- Source:
# (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 |
- Source:
# (static) drawText(text, pos, sizeopt, coloropt, lineWidthopt, lineColoropt, textAlignopt)
Draw text on overlay canvas in world space
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' |
- 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:
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 |
- Source:
# (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 |
- 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
Parameters:
Name | Type | Description |
---|---|---|
screenPos |
Vector2 |
- Source:
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 |
- Source:
# (static) toggleFullscreen()
Toggle fullsceen mode
- Source:
# (static) worldToScreen(worldPos) → {Vector2}
Convert from world to screen space coordinates
Parameters:
Name | Type | Description |
---|---|---|
worldPos |
Vector2 |
- Source:
Returns:
- Type
- Vector2