Draw

Extra canvas to composite behind the engine canvases when combining canvases Set by plugins that render to their own canvas below the LittleJS canvases

The default 2d context to use for drawing, usually mainContext

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

Engine font image, 8x8 font provided by the engine

The primary 2D canvas visible to the user

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

• This is the screen space coordinate system, matching mousePos
• With canvasPixelRatio set the backing store is larger than this

2d context for mainCanvas

• Scaled by canvasPixelRatio, so drawing to it is in css pixels
• getImageData and putImageData ignore that scale and work in backing store pixels, so use workReadCanvas to read pixels back instead of this

Keeps track of how many primitives were drawn each frame for debugging A single draw call can render many primitives (e.g. a WebGL sprite batch).

Array containing texture info for batch rendering system

Offscreen canvas that can be used for image processing

Offscreen canvas that can be used for image processing

Offscreen canvas with willReadFrequently that can be used for image processing

Offscreen canvas with willReadFrequently that can be used for image processing

Fit the camera to a rectangle in world space by setting cameraPos and cameraScale

• worldMargin pads the content rectangle in world units, so the gap scales with the content on resize
• screenInset reserves space in screen pixels on each viewport edge (for example a HUD band) and re-centers the content away from that edge, so the reserved band stays a fixed pixel size on resize
• worldMargin and screenInset may each be a number for all sides, a Vector2 (x=left/right, y=top/bottom), or an object with any of {top, right, bottom, left}

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

Draw directly to a 2d canvas context in world space. The Y axis is flipped so world-Y-up coordinates render right-side up (matches the WebGL path). Callers whose drawing depends on Y direction (e.g. linear gradients) should flip their own Y endpoints accordingly.

Draw colored circle using passed in point

Draw a circle filled with a radial gradient from the center to the rim

• Best when batched with other untextured polys
• If drawing mostly textured sprites, bake the gradient into a texture and use drawTile instead
• Stacking gradients at the exact same position may show a faint vertical artifact

Draw colored ellipse using passed in point

Draw an ellipse filled with a radial gradient from the center to the rim

• Best when batched with other untextured polys
• If drawing mostly textured sprites, bake the gradient into a texture and use drawTile instead
• Stacking gradients at the exact same position may show a faint vertical artifact

Draw colored line between two points

Draw connected lines between a series of points

Draw colored polygon using passed in points

• WebGL fills a polygon whose edges do not cross, concave or not; a self crossing one, like a star through its outer points, fills wrong there, so draw it as its simple outline or in parts

Draw colored rect centered on pos

Draw a rect centered on pos with a gradient from top to bottom

Draw colored regular polygon using passed in number of sides

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

Draw text in screen space Automatically splits new lines into rows

Draw a texture tiled (wrapped) across a rectangle in world space. Useful for backgrounds, repeating patterns, and seamless fills. The whole texture is tiled — sub-region (TileInfo) wrapping is not supported.

Draw textured tile centered in world space

Get the size of the camera window in world space

Returns true if fullscreen mode is active

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

Load a texture at a specific index after engineInit, the images passed to engineInit load this way

Convert from screen to world space coordinates

Convert from screen to world space coordinates for a directional vector (no translation)

Convert screen space transform to world space

Enable additive blending

Set an extra canvas to composite behind the engine canvases when combining Plugins that insert their own canvas below the LittleJS canvases should set this so it appears in screenshots and video capture

Set the cursor style

Set the Shader that 2D draws use from now on, none for the engine's own

• The object render loop sets each object's own shader, so this is for draws in gameRender and gameRenderPost

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

Toggle fullscreen mode

Convert from world to screen space coordinates

Convert from world to screen space coordinates for a directional vector (no translation)

Padding for each side of a rectangle, the sides left out are 0