Class: Canvas

Properties

Methods

doLinesIntersect()
isOverLayer(x, y, layer)
addLayer(url)
canvasMousePos(e)
cropToLayer(layer)
deSelectLayer()
destroy()
destroyCtrlGroup()
doLayersOverlap(layer1, layer2)
draw()

extractPortion(centerx, centery, width, height[, rotation][, unrotated])
getGridLines(snap)
getLayerAt(x, y)
getLayerByName(name)
getOverlappingLayers(layer)
hideGrid()
isGroupOnCanvas()
isLayerInGroup(layer)
isOverSelectableLayer(x, y)
loadState(state)

redo()
removeAllLayers()
removeLayer(layer)
saveState()
selectLayer(layer)
showGrid()
snapOff()
snapOn()
undo()

new Canvas(canvas)

Construct a new instance of the Canvas class

Parameters

Name	Type	Optional	Description
canvas			The canvas to instantiate the class upon.

Version
: 2.1.4
See also: https://pamblam.github.io/canvas-layers/examples/
Returns

Properties

static

anchorRadius Number

The default anchorRadius value for all Canvas instances.

static

cursors Object

The default Cursor values for all Canvas instances. See the canvas constructor for details.

Properties

Name	Type	Optional	Description

static

fillStyle String

The default fillStyle value for all Canvas instances.

static

lineWidth Number

The default lineWidth value for all Canvas instances.

static

strokeStyle String

The default strokeStyle value for all Canvas instances.

static

version String

The version of the library

Methods

static

doLinesIntersect() → Boolean

returns true if the line from (a,b)->(c,d) intersects with (p,q)->(r,s)

Returns: Boolean

static

isOverLayer(x, y, layer) → Boolean

Are the given coordinates over the given layer?

Parameters

Name	Type	Description
x	Number	The x ordinate.
y	Number	The y ordinate.
layer	CanvasLayer	The layer to check.

Returns: Boolean

addLayer(url) → CanvasLayer

Add a layer to the canvas.

Parameters

Name	Type	Optional	Description
url	String		The URI or URL of an image to draw on the canvas.

Returns: CanvasLayer - The layer that was added.

canvasMousePos(e) → Object

Get the cooresponding coordinates of the mouses position on the canvas.

Parameter

Name	Type	Optional	Description
e	MouseEvent		The event passed to a mouse event handler.

Returns: {x: Number, y: Number}

cropToLayer(layer) → Promise

Rotate and crop the canvas to the dimensions and rotation of the specified layer.

Parameter

Name	Type	Optional	Description
layer	CanvasLayer		The layer to crop to.

Returns: Promise - A Promise htat resolves with the DataURI of the cropped area.

deSelectLayer() → undefined

Deselect the selected layer if one is selected.

Returns: undefined

destroy()

Destroy the whole thing

destroyCtrlGroup() → Promise

Remove the ctrl-grp from the canvas

Returns: Promise

doLayersOverlap(layer1, layer2) → Boolean

Check if two given layers overlap

Parameters

Name	Type	Optional	Description
layer1	CanvasLayer
layer2	CanvasLayer

Returns: Boolean

draw() → Promise

Draw the canvas.

Returns: Promise

extractPortion(centerx, centery, width, height[, rotation][, unrotated]) → Promise

Rotate and extract a custom area of the canvas.

Parameters

Name	Type	Optional	Description
centerx	Number		The x position of the center of the area to extract.
centery	Number		The y position of the center of the area to extract.
width	Number		The width of the area to extract from teh canvas.
height	Number		The height of the area to extract from teh canvas.
rotation	Number	Yes	The rotation of the area to extract, counter-clockwise, in degrees. Defaults to `0`.
unrotated	Boolean	Yes	If true, undo the rotation so the layer is in it's natural position. Defaults to `true`.

Returns: Promise - A Promise htat resolves with the DataURI of the cropped area.

getGridLines(snap) → Object

Get an object containing arrays of x and y grid line positons

Parameter

Name Type Optional Description

Name	Type	Optional	Description
snap	Boolean		If true, get lines to snap to, else get lines to display Defaults to `true`.

snap

Boolean

If true, get lines to snap to, else get lines to display

Defaults to true.

Returns: Object - An object with an 'xs' property containing x positions and a 'ys' property containing y positions;

getLayerAt(x, y) → (CanvasLayer or null)

Get the layer at the given canvas coordinates.

Parameters

Name	Type	Optional	Description
x	Number		The x ordinate.
y	Number		The y ordinate.

Returns: (CanvasLayer or null)

getLayerByName(name) → (CanvasLayer or null)

Get a layer by it's given name.

Parameter

Name	Type	Optional	Description
name	String		The name of the layer.

Returns: (CanvasLayer or null)

getOverlappingLayers(layer) → (Array or Canvas.getOverlappingLayers.layers)

Get an array of all layers that the given layer overlaps.

Parameter

Name	Type	Optional	Description
layer	type

Returns: (Array or Canvas.getOverlappingLayers.layers)

hideGrid() → undefined

Hide the grid lines on the canvas

Returns: undefined

isGroupOnCanvas() → Boolean

Is the ctrl-grp on the canvas?

Returns: Boolean

isLayerInGroup(layer) → Boolean

Is the provided layer part of the ctrl-grp

Parameter

Name	Type	Optional	Description
layer	CavnasLayer

Returns: Boolean

isOverSelectableLayer(x, y) → Boolean

Are the given coordinates over a selectable layer?

Parameters

Name	Type	Optional	Description
x	Number		The x ordinate.
y	Number		The y ordinate.

Returns: Boolean

loadState(state) → undefined

Load the state object

Parameter

Name	Type	Optional	Description
state	type

Returns: undefined

redo() → undefined

Redo the last un-did action

Returns: undefined

removeAllLayers() → undefined

Remove all layers from teh canvas.

Returns: undefined

removeLayer(layer) → undefined

Remove the specified layer from the canvas.

Parameter

Name	Type	Optional	Description
layer	CanvasLayer		The layer to remove

Returns: undefined

saveState() → undefined

saves the current state in the state stack

Returns: undefined

selectLayer(layer) → undefined

Select the given layer.

Parameter

Name	Type	Optional	Description
layer	CanvasLayer		The layer to select.

Returns: undefined

showGrid() → undefined

Show the grid lines on the canvas

Returns: undefined

snapOff() → undefined

Disable snap to grid

Returns: undefined

snapOn() → undefined

Enable snap to grid

Returns: undefined

undo() → undefined

Undo an action

Returns: undefined