Class: Canvas

Canvas

The canvas object controls the map layers and has methods for drawing and erasing on the layers. Each layer is an HTML canvas element.

Layers

Layer Description
background for drawing behind the map
map main layer, where the map is drawn
foreground for drawing in front of the map (e.g. map based captions)
canvas layer for traning static components (e.g. canvas based captions and legend)
debug layer to draw debug information
ui layer for capturing interactions

new Canvas(viewer, container, options)

Canvas.js, line 35

Create the Canvas object.

Name Type Description
viewer Viewer

The viewer
container d3Element

D3 Element where canvas layers will be added
options Object

Possible properties: width [Default: 600], height [Default: 600]

Members

cursorString

Get or set the cursor style for the mouse when it's on the canvas.

heightNumber

Get the width of the canvas. Changing this value will not resize the layers. Use resize instead.

layerNamesArray

Get the names of the layers.

layoutLayout

Get the layout.

pixelRatioNumber

Get the pixel ratio for the canvas.

sequenceSequence

Get the sequence.

viewerViewer

Get the viewer.

widthNumber

Get the width of the canvas. Changing this value will not resize the layers. Use resize instead.

Methods

clear(layerName)

Canvas.js, line 203

Clear the viewer canvas.

Name Type Default Description
layerName String map

Name of layer to clear [Default: 'map']. A special value of 'all' will clear all the layers.

resize(width, height)

Canvas.js, line 121

Resize all layers to a new width and height.

Name Type Description
width Number

New width for each layer
height Number

New height for each layer