CanvasDrawer.md

CanvasDrawer

Kind: global class
Npmpackage:
Properties

Name	Type	Description
id	string	a STRING id suffix the canvas DOM element will go by; is appeneded to 'cd_'
target	element	the target DOM element in which to place the canvas element; if undefined, element will not be added to DOM
css	object	an optional CSS object defining the style of the canvas. If undefined, will size canvas to the width and height of the target DOM element.
clearCanvas	boolean	an optional BOOLEAN which determines if, on update, the CanvasDrawer clears the contents of its canvas before redrawing every CanvasElement; defaults to true.
retina	boolean	an optional BOOLEAN which determine whether or not to create the canvas and its elements at retina (double) resolution; defaults to false.
subPixeling	boolean	an optional BOOLEAN which will override retina to true but preserve certain width/height values to produce smoother sub-pixeling in animations; defaults to false.
debug	boolean	an optional BOOLEAN value of true will make the canvas background green; defaults to false.

• CanvasDrawer
  • new CanvasDrawer(arg)
  • .canvas : UICanvas
  • .ctx
  • .clearCanvas : boolean
  • .qualityScale : number
  • .elements : object
  • .elementsLength : number
  • .width : number
  • .height : number
  • .removeElement(target)
  • .removeAllElements()
  • .clear()
  • .update()

new CanvasDrawer(arg)

Import from ad-canvas

import { CanvasDrawer } from 'ad-canvas'

Is the returned instance of CanvasDrawer.

NOTE::

• The update() method is key to displaying any element added creating a new CanvasElement. If you add something and don't see it, you might not have used update()
• You SHOULD NOT run the update() method after every individual element is added, but rather once after the creation of all your elements

Param	Type	Description
arg	object	Settings are passed in via this object, see Properties for more info:

Example

View.main.myCanvasDrawer = new CanvasDrawer({
	id: 'myCanvasDrawer', 
	target: View.main,
	css: {
		x: 0,
		y: 0,
		width: 300,
		height:	250
	},
	retina: true,
	debug: false
})

CanvasDrawer.canvas : UICanvas

the actual canvas DOM element in which the CanvasDrawer's instance draws

Kind: static property of CanvasDrawer

CanvasDrawer.ctx

The context2d of the canvas DOM element

Kind: static property of CanvasDrawer

CanvasDrawer.clearCanvas : boolean

BOOLEAN for if the canvas drawer should clear itself on every update before re-drawing its CanvasElements

Kind: static property of CanvasDrawer

CanvasDrawer.qualityScale : number

NUMBER representing the scale of the canvas DOM element: if retina or subPixeling were set to true, is equal to 2. Defaults to 1.

Kind: static property of CanvasDrawer

CanvasDrawer.elements : object

Object containing all of the drawing elements created through new CanvasElements.

Kind: static property of CanvasDrawer

CanvasDrawer.elementsLength : number

Number of total elements

Kind: static property of CanvasDrawer

CanvasDrawer.width : number

Number to set or retrieve the width of the canvas

Kind: static property of CanvasDrawer

CanvasDrawer.height : number

Number to set or retrieve the width of the canvas

Kind: static property of CanvasDrawer

CanvasDrawer.removeElement(target)

Removes a specific CanvasElement from CanvasDrawer.elements by either its ID or a direct reference to the CanvasElement.

Kind: static method of CanvasDrawer

Param	Type	Description
target	element | string	the STRING ID used to reference an element or a reference to the ELEMENT itself

Example

View.main.myCanvasDrawer.removeElement('smoke')
View.main.myCanvasDrawer.removeElement(View.main.myCanvasDrawer.elements.smoke)

CanvasDrawer.removeAllElements()

Removes everything from CanvasDrawer.elements.

Kind: static method of CanvasDrawer
Example

View.main.myCanvasDrawer.removeAllElements()

CanvasDrawer.clear()

Wipes the canvas clean of any image data

Kind: static method of CanvasDrawer

CanvasDrawer.update()

Clear and draw all draw items in the elements dictionary associated with this CanvasDrawer.

Renders CanvasElements in order of creation.

will not draw the item if elements.visible !== true or elements.alpha === 0

Kind: static method of CanvasDrawer
Properties

Name	Type	Description
array	array	an OPTIONAL array of CanvasElements associated with this CanvasDrawer; rather than rendering all of the CanvasElements in order of creation this will only the CanvasElements within the given array, and in that order - order of creation does not apply in this instance.