#

API Docs for: 3.10.3
Show: Inherited Protected Private Deprecated

# CanvasGraphic Class

Defined in: `graphics/js/CanvasGraphic.js:1`
Module: graphics

Canvas implementation of the `Graphic` class. `CanvasGraphic` is not intended to be used directly. Instead, use the `Graphic` class. If the browser lacks SVG capabilities but has Canvas capabilities, the `Graphic` class will point to the `CanvasGraphic` class.

- Index
- Methods
- Properties
- Attributes

## Item Index

### Methods

- _appendShape
- _calculateTranslate
- _getDocFrag
- _getShapeClass
- _getUpdatedContentBounds
- _redraw
- _removeChildren
- _toBack
- _toFront
- _toggleVisible
- addShape
- addToRedrawQueue
- batch
- clear
- destroy
- getShapeById
- getXY
- initializer
- removeAllShapes
- removeShape
- render
- set

### Properties

- _shapeClass
- _x
- _y

### Attributes

- autoDraw
- autoSize
- contentBounds
- height
- id
- node
- preserveAspectRatio
- render
- resizeDown
- shapes
- visible
- width
- x
- y

## Methods

### `_appendShape`

(

- `shape`

)
private

Defined in `graphics/js/CanvasGraphic.js:441`

Adds a shape instance to the graphic instance.

#### Parameters:

- `shape` Shape

  The shape instance to be added to the graphic.

### `_calculateTranslate`

(

- `position`
- `contentSize`
- `boundsSize`

)
private

Defined in `graphics/js/CanvasGraphic.js:713`

Determines the value for either an x or y value to be used for the `translate` of the Graphic.

#### Parameters:

- `position` String

  The position for placement. Possible values are min, mid and max.

- `contentSize` Number

  The total size of the content.

- `boundsSize` Number

  The total size of the Graphic.

#### Returns:

Number

### `_getDocFrag`

() private

Defined in `graphics/js/CanvasGraphic.js:626`

Returns a document fragment to for attaching shapes.

#### Returns:

DocumentFragment

### `_getShapeClass`

(

- `val`

)
private

Defined in `graphics/js/CanvasGraphic.js:566`

Returns a shape class. Used by `addShape`.

#### Parameters:

- `val` Shape | String

  Indicates which shape class.

#### Returns:

Function

### `_getUpdatedContentBounds`

() Object private

Defined in `graphics/js/CanvasGraphic.js:771`

Recalculates and returns the `contentBounds` for the `Graphic` instance.

#### Returns:

Object:

### `_redraw`

() private

Defined in `graphics/js/CanvasGraphic.js:642`

Redraws all shapes.

### `_removeChildren`

(

- `node`

)
private

Defined in `graphics/js/CanvasGraphic.js:517`

Removes all child nodes.

#### Parameters:

- `node` HTMLElement

### `_toBack`

(

- `Shape`

)
private

Defined in `graphics/js/CanvasGraphic.js:825`

Inserts shape as the first child of the content node.

#### Parameters:

- `Shape` CanvasShape

  to add.

### `_toFront`

(

- `Shape`

)
private

Defined in `graphics/js/CanvasGraphic.js:805`

Inserts shape on the top of the tree.

#### Parameters:

- `Shape` CanvasShape

  to add.

### `_toggleVisible`

(

- `val`

)
private

Defined in `graphics/js/CanvasGraphic.js:538`

Toggles visibility

#### Parameters:

- `val` Boolean

  indicates visibilitye

### `addShape`

(

- `cfg`

)

Defined in `graphics/js/CanvasGraphic.js:421`

Generates a shape instance by type.

#### Parameters:

- `cfg` Object

  attributes for the shape

#### Returns:

Shape

### `addToRedrawQueue`

(

- `Shape`

)
protected

Defined in `graphics/js/CanvasGraphic.js:742`

Adds a shape to the redraw queue and calculates the contentBounds. Used internally by `Shape` instances.

#### Parameters:

- `Shape` Object

  shape The shape instance to add to the queue

### `batch`

(

- `method`

)

Defined in `graphics/js/CanvasGraphic.js:612`

Allows for creating multiple shapes in order to batch appending and redraw operations.

#### Parameters:

- `method` Function

  Method to execute.

### `clear`

()

Defined in `graphics/js/CanvasGraphic.js:508`

Clears the graphics object.

### `destroy`

()

Defined in `graphics/js/CanvasGraphic.js:406`

Removes all nodes.

### `getShapeById`

(

- `id`

)

Defined in `graphics/js/CanvasGraphic.js:599`

Returns a shape based on the id of its dom node.

#### Parameters:

- `id` String

  Dom id of the shape's node attribute.

#### Returns:

Shape

### `getXY`

()

Defined in `graphics/js/CanvasGraphic.js:335`

Gets the current position of the graphic instance in page coordinates.

#### Returns:

Array The XY position of the shape.

### `initializer`

(

- `config`

)
private

Defined in `graphics/js/CanvasGraphic.js:352`

Initializes the class.

#### Parameters:

- `config` Object

  Optional attributes

### `removeAllShapes`

()

Defined in `graphics/js/CanvasGraphic.js:489`

Removes all shape instances from the dom.

### `removeShape`

(

- `shape`

)

Defined in `graphics/js/CanvasGraphic.js:462`

Removes a shape instance from from the graphic instance.

#### Parameters:

- `shape` Shape | String

  The instance or id of the shape to be removed.

### `render`

(

- `parentNode`

)

Defined in `graphics/js/CanvasGraphic.js:383`

Adds the graphics node to the dom.

#### Parameters:

- `parentNode` HTMLElement

  node in which to render the graphics node into.

### `set`

(

- `name`
- `value`

)

Defined in `graphics/js/CanvasGraphic.js:271`

Sets the value of an attribute.

#### Parameters:

- `name` String | Object

  The name of the attribute. Alternatively, an object of key value pairs can be passed in to set multiple attributes at once.

- `value` Any

  The value to set the attribute to. This value is ignored if an object is received as the name param.

## Properties

### `_shapeClass`

Object private

Defined in `graphics/js/CanvasGraphic.js:584`

Look up for shape classes. Used by `addShape` to retrieve a class for instantiation.

### `_x`

Number private

Defined in `graphics/js/CanvasGraphic.js:317`

Storage for `x` attribute.

### `_y`

Number private

Defined in `graphics/js/CanvasGraphic.js:326`

Storage for `y` attribute.

## Attributes

### `autoDraw`

Boolean private

Defined in `graphics/js/CanvasGraphic.js:240`

Indicates whether or not the instance will automatically redraw after a change is made to a shape. This property will get set to false when batching operations.

Default: true

### `autoSize`

Boolean | String

Defined in `graphics/js/CanvasGraphic.js:134`

Determines the sizing of the Graphic.

sizeContentToGraphic
  The Graphic's width and height attributes are, either explicitly set through the `width` and `height` attributes or are determined by the dimensions of the parent element. The content contained in the Graphic will be sized to fit with in the Graphic instance's dimensions. When using this setting, the `preserveAspectRatio` attribute will determine how the contents are sized.
sizeGraphicToContent
  (Also accepts a value of true) The Graphic's width and height are determined by the size and positioning of the content.
false
  The Graphic's width and height attributes are, either explicitly set through the `width` and `height` attributes or are determined by the dimensions of the parent element. The contents of the Graphic instance are not affected by this setting.

Default: false

### `contentBounds`

Object readonly

Defined in `graphics/js/CanvasGraphic.js:68`

Object containing size and coordinate data for the content of a Graphic in relation to the graphic instance's position.

### `height`

Number

Defined in `graphics/js/CanvasGraphic.js:117`

Indicates the height of the `Graphic`.

### `id`

String

Defined in `graphics/js/CanvasGraphic.js:29`

Unique id for class instance.

### `node`

HTMLElement readonly

Defined in `graphics/js/CanvasGraphic.js:84`

The outermost html element of the Graphic instance.

### `preserveAspectRatio`

String

Defined in `graphics/js/CanvasGraphic.js:158`

Determines how content is sized when `autoSize` is set to `sizeContentToGraphic`.

none
  Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle.
xMinYMin
  Force uniform scaling position along the top left of the Graphic's node.
xMidYMin
  Force uniform scaling horizontally centered and positioned at the top of the Graphic's node.
xMaxYMin
  Force uniform scaling positioned horizontally from the right and vertically from the top.
xMinYMid
Force uniform scaling positioned horizontally from the left and vertically centered.
xMidYMid (the default)
  Force uniform scaling with the content centered.
xMaxYMid
  Force uniform scaling positioned horizontally from the right and vertically centered.
xMinYMax
  Force uniform scaling positioned horizontally from the left and vertically from the bottom.
xMidYMax
  Force uniform scaling horizontally centered and position vertically from the bottom.
xMaxYMax
  Force uniform scaling positioned horizontally from the right and vertically from the bottom.

Default: xMidYMid

### `render`

Node | String

Defined in `graphics/js/CanvasGraphic.js:20`

Whether or not to render the `Graphic` automatically after to a specified parent node after init. This can be a Node instance or a CSS selector string.

### `resizeDown`

Boolean

Defined in `graphics/js/CanvasGraphic.js:183`

The contentBounds will resize to greater values but not smaller values. (for performance) When resizing the contentBounds down is desirable, set the resizeDown value to true.

### `shapes`

Object readonly

Defined in `graphics/js/CanvasGraphic.js:52`

Key value pairs in which a shape instance is associated with its id.

### `visible`

Boolean

Defined in `graphics/js/CanvasGraphic.js:253`

Indicates whether the `Graphic` and its children are visible.

### `width`

Number

Defined in `graphics/js/CanvasGraphic.js:100`

Indicates the width of the `Graphic`.

### `x`

Number

Defined in `graphics/js/CanvasGraphic.js:194`

Indicates the x-coordinate for the instance.

### `y`

Number

Defined in `graphics/js/CanvasGraphic.js:217`

Indicates the y-coordinate for the instance.