Constructor
new Canvas()
- See:
-
- CanvasLayer An abstract class for all Canvas layers.
- PlaceablesLayer An abstract class for Canvas Layers which contain Placeable Objects.
- PlaceableObject An abstract class for objects which are placed into the Scene and drawn on the canvas.
Properties:
| Name | Type | Description |
|---|---|---|
primary |
PrimaryCanvasGroup | |
effects |
EffectsCanvasGroup | |
interface |
InterfaceCanvasGroup | |
background |
BackgroundLayer | |
drawings |
DrawingsLayer | |
grid |
GridLayer | |
walls |
WallsLayer | |
templates |
TemplateLayer | |
notes |
NotesLayer | |
tokens |
TokenLayer | |
lighting |
LightingLayer | |
foreground |
ForegroundLayer | |
sounds |
SoundsLayer | |
sight |
SightLayer | |
weather |
WeatherLayer | |
controls |
ControlsLayer |
Example
Example Canvas commands
canvas.ready; // Is the canvas ready for use?
canvas.scene; // The currently viewed Scene document.
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
(static) layers :Object.<string, CanvasLayer>
A mapping of named CanvasLayer classes which defines the layers which comprise the Scene.
Type:
- Object.<string, CanvasLayer>
_pendingOperationNames :Set.<string>
A Set of unique pending operation names to ensure operations are only performed once
Type:
- Set.<string>
activeLayer :CanvasLayer
Return a reference to the active Canvas Layer
Type:
blurDistance :number
The pixel radius of blur distance that should be applied for the current zoom level
Type:
- number
blurFilters :Array.<PIXI.filters.BlurFilter>
An array of blur filter instances which are modified by the zoom level and the "soft shadows" setting
Type:
- Array.<PIXI.filters.BlurFilter>
currentMouseManager :MouseInteractionManager|null
A reference to the MouseInteractionManager that is currently controlling pointer-based interaction, or null.
Type:
- MouseInteractionManager | null
dimensions :null|object
The current pixel dimensions of the displayed Scene, or null if the Canvas is blank.
Type:
- null | object
fps :Object
Record framerate performance data
Type:
- Object
hud :HeadsUpDisplay|null
A reference to the HeadsUpDisplay container which overlays HTML rendering on top of this Canvas.
Type:
- HeadsUpDisplay | null
id :string|null
The id of the currently displayed Scene.
Type:
- string | null
initialized :boolean
A flag for whether the game Canvas is initialized and ready for drawing.
Type:
- boolean
initializing :Promise.<void>|null
A promise that resolves when the canvas is first initialized and ready.
Type:
- Promise.<void> | null
layers :Array.<CanvasLayer>
An Array of all CanvasLayer instances which are active on the Canvas board
Type:
loading :boolean
A flag to indicate whether a new Scene is currently being drawn.
Type:
- boolean
mouseInteractionManager :MouseInteractionManager
The singleton interaction manager instance which handles mouse interaction on the Canvas.
Type:
pendingOperations :Array.<object>
An Array of pending canvas operations which should trigger on the next re-paint
Type:
- Array.<object>
perception :PerceptionManager
A perception manager interface for batching lighting, sight, and sound updates
Type:
ready :boolean
A flag for whether the game Canvas is ready to be used. False if the canvas is not yet drawn, true otherwise.
Type:
- boolean
scene :Scene|null
A reference to the currently displayed Scene document, or null if the Canvas is currently blank.
Type:
- Scene | null
screenDimensions :Array.<number>
The renderer screen dimensions.
Type:
- Array.<number>
Methods
(static) getDimensions(dimensions)
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 2x grid size. The rounding accomplishes that the padding buffer around the map always contains whole grid spaces.
Parameters:
| Name | Type | Description |
|---|---|---|
dimensions |
object | The scene dimensions data being established |
(async) _initialize() → {Promise.<void>}
Once the canvas is drawn, initialize control, visibility, and audio states
Returns:
- Type
- Promise.<void>
_onClickLeft2(event)
- See:
-
- {MouseInteractionManager#_handleClickLeft2}
Handle double left-click events occurring on the Canvas stage.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
PIXI.InteractionEvent |
_onDragCanvasPan(event)
Pan the canvas view when the cursor position gets close to the edge of the frame
Parameters:
| Name | Type | Description |
|---|---|---|
event |
MouseEvent | The originating mouse movement event |
activateFPSMeter()
Activate framerate tracking by adding an HTML element to the display and refreshing it every frame.
activateLayer(layerName)
Activate a specific CanvasLayer by its canonical name
Parameters:
| Name | Type | Description |
|---|---|---|
layerName |
string | The named layer to activate |
addPendingOperation(name, fn, scope, …args)
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(view) → {Promise}
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 | ||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
view |
object | The desired view parameters Properties
|
Returns:
A Promise which resolves once the animation has been completed
- Type
- Promise
createBlurFilter() → {PIXI.filters.BlurFilter}
Create a BlurFilter instance and register it to the array for updates when the zoom level changes.
Returns:
- Type
- PIXI.filters.BlurFilter
deactivateFPSMeter()
Deactivate framerate tracking by canceling ticker updates and removing the HTML element.
(async) draw(sceneopt) → {Promise.<Canvas>}
Draw the game canvas.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
scene |
Scene |
<optional> |
A specific Scene document to render on the Canvas |
Returns:
A Promise which resolves once the Canvas is fully drawn
- Type
- Promise.<Canvas>
getGLParameter(parameter) → {any}
Get the value of a GL parameter
Parameters:
| Name | Type | Description |
|---|---|---|
parameter |
string | The GL parameter to retrieve |
Returns:
The returned value type depends of the parameter to retrieve
- Type
- any
getLayerByEmbeddedName(embeddedName) → {PlaceablesLayer|null}
Given an embedded object name, get the canvas layer for that object
Parameters:
| Name | Type | Description |
|---|---|---|
embeddedName |
string |
Returns:
- Type
- PlaceablesLayer | null
highlightObjects(active)
Highlight objects on any layers which are visible
Parameters:
| Name | Type | Description |
|---|---|---|
active |
boolean |
initialize()
Initialize the Canvas by creating the HTML element and PIXI application. This step should only ever be performed once per client session. Subsequent requests to reset the canvas should go through Canvas#draw
pan(x, y, scale)
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.Canvas.maxZoom) of the action |
(async) recenter() → {Promise.<void>}
Recenter the canvas Otherwise, pan the stage to put the top-left corner of the map in the top-left corner of the window
Returns:
A Promise which resolves once the animation has been completed
- Type
- Promise.<void>
setBackgroundColor(color)
Sets the background color.
Parameters:
| Name | Type | Description |
|---|---|---|
color |
string | The color to set the canvas background to. |
(async) tearDown() → {Promise.<void>}
When re-drawing the canvas, first tear down or discontinue some existing processes
Returns:
- Type
- Promise.<void>
triggerPendingOperations()
Fire all pending functions that are registered in the pending operations queue and empty it.