Canvas

Canvas

The virtual tabletop environment is implemented using a WebGL powered HTML 5 canvas using the powerful PIXI.js library. The canvas is comprised of an ordered sequence of layers which define rendering groups and collections of objects that are drawn on the canvas itself.

Constructor

new Canvas()

Source:
See:
  • {link CanvasLayer} An abstract class for all Canvas layers.
  • {link PlaceablesLayer} An abstract class for Canvas Layers which contain Placeable Objects.
  • {link PlaceableObject} An abstract class for objects which are placed into the Scene and drawn on the canvas.
Example

Example Canvas commands

canvas.ready; // Is the canvas ready for use?
canvas.scene; // The currently viewed Scene entity.
canvas.dimensions; // The dimensions of the current Scene.
canvas.draw(); // Completely re-draw the game canvas (this is usually unnecessary).
canvas.pan(x, y, zoom); // Pan the canvas to new coordinates and scale.
canvas.recenter(); // Re-center the canvas on the currently controlled Token.

Members

_pendingOperationNames :Set.<string>

Source:

A Set of unique pending operation names to ensure operations are only performed once

Type:
  • Set.<string>

activeLayer :CanvasLayer

Source:

Return a reference to the active Canvas Layer

Type:

pendingOperations :Array

Source:

An Array of pending canvas operations which should trigger on the next re-paint

Type:

ready :boolean

Source:

A flag for whether the game Canvas is ready to be used. False if the canvas is not yet drawn, true otherwise.

Type:
  • boolean

Methods

_initialize()

Source:

Once the canvas is drawn, initialize control, visibility, and audio states

addPendingOperation(name, fn, scope, …args)

Source:

Add a pending canvas operation that should fire once the socket handling workflow concludes. This registers operations by a unique string name into a queue - avoiding repeating the same work multiple times. This is especially helpful for multi-object updates to avoid costly and redundant refresh operations.

Parameters:
Name Type Attributes Description
name string

A unique name for the pending operation, conventionally Class.method

fn function

The unbound function to execute later

scope *

The scope to which the method should be bound when called

args * <repeatable>

Arbitrary arguments to pass to the method when called

(async) animatePan(x, y, scale, duration, speed) → {Promise}

Source:

Animate panning the canvas to a certain destination coordinate and zoom scale Customize the animation speed with additional options Returns a Promise which is resolved once the animation has completed

Parameters:
Name Type Description
x Number

The destination x-coordinate

y Number

The destination y-coordinate

scale Number

The destination zoom scale

duration Number

The total duration of the animation in milliseconds; used if speed is not set

speed Number

The speed of animation in pixels per second; overrides duration if set

Returns:

A Promise which resolves once the animation has been completed

Type
Promise

(async) draw()

Source:

Draw the game canvas.

getDimensions()

Source:

Get the canvas active dimensions based on the size of the scene's map We expand the image size by a factor of 1.5 and round to the nearest 200 pixels This guarantees that walls and tokens remain positioned in the same location if the grid size changes

getLayer(layerName) → {CanvasLayer}

Source:

Get a reference to the a specific CanvasLayer by it's name

Parameters:
Name Type Description
layerName string

The name of the canvas layer to get

Returns:
Type
CanvasLayer

pan(x, y, scale)

Source:

Pan the canvas to a certain {x,y} coordinate and a certain zoom level

Parameters:
Name Type Description
x number | null

The x-coordinate of the pan destination

y number | null

The y-coordinate of the pan destination

scale number | null

The zoom level (max of CONFIG.maxCanvasZoom) of the action

recenter()

Source:

Recenter the canvas Otherwise, pan the stage to put the top-left corner of the map in the top-left corner of the window

tearDown()

Source:

When re-drawing the canvas, first tear down or discontinue some existing processes

triggerPendingOperations()

Source:

Fire all pending functions that are registered in the pending operations queue and empty it.