#

API Docs for: 3.10.3
Show: Inherited Protected Private Deprecated

# CanvasDrawing Class

Defined in: `graphics/js/CanvasDrawing.js:24`
Module: graphics

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

- Index
- Methods
- Properties

## Item Index

### Methods

- _clearAndUpdateCoords
- _createGraphic
- _curveTo
- _getLinearGradient
- _getRadialGradient
- _initProps
- _lineTo
- _moveTo
- _quadraticCurveTo
- _setCurveBoundingBox
- _toRGB
- _toRGBA
- _trackSize
- _updateCoords
- _updateDrawingQueue
- _updateNodePosition
- clear
- closePath
- curveTo
- curveTo
- drawCircle
- drawDiamond
- drawEllipse
- drawRect
- drawRect
- drawWedge
- end
- getBezierData
- lineTo
- lineTo
- moveTo
- quadraticCurveTo
- relativeMoveTo
- relativeQuadraticCurveTo
- setSize

### Properties

- _currentX
- _currentY
- _drawingComplete
- _pathSymbolToMethod

## Methods

### `_clearAndUpdateCoords`

() private

Defined in `graphics/js/CanvasDrawing.js:153`

Clears the coordinate arrays. Called at the end of a drawing operation.

### `_createGraphic`

() private

Defined in `graphics/js/CanvasDrawing.js:946`

Creates canvas element

#### Returns:

HTMLCanvasElement

### `_curveTo`

(

- `args`
- `relative`

)
private

Defined in `graphics/js/CanvasDrawing.js:361`

Implements curveTo methods.

#### Parameters:

- `args` Array

  The arguments to be used.

- `relative` Boolean

  Indicates whether or not to use relative coordinates.

### `_getLinearGradient`

() private

Defined in `graphics/js/CanvasDrawing.js:744`

Returns a linear gradient fill

#### Returns:

CanvasGradient

### `_getRadialGradient`

() private

Defined in `graphics/js/CanvasDrawing.js:824`

Returns a radial gradient fill

#### Returns:

CanvasGradient

### `_initProps`

() private

Defined in `graphics/js/CanvasDrawing.js:916`

Clears all values

### `_lineTo`

(

- `args`
- `relative`

)
private

Defined in `graphics/js/CanvasDrawing.js:225`

Implements lineTo methods.

#### Parameters:

- `args` Array

  The arguments to be used.

- `relative` Boolean

  Indicates whether or not to use relative coordinates.

### `_moveTo`

(

- `args`
- `relative`

)
private

Defined in `graphics/js/CanvasDrawing.js:305`

Implements moveTo methods.

#### Parameters:

- `args` Array

  The arguments to be used.

- `relative` Boolean

  Indicates whether or not to use relative coordinates.

### `_quadraticCurveTo`

(

- `args`
- `relative`

)
private

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

Implements quadraticCurveTo methods.

#### Parameters:

- `args` Array

  The arguments to be used.

- `relative` Boolean

  Indicates whether or not to use relative coordinates.

### `_setCurveBoundingBox`

(

- `Array`
- `Number`
- `Number`

)
private

Defined in `graphics/js/CanvasDrawing.js:986`

Calculates the bounding box for a curve

#### Parameters:

- `Array` Object

  pts Array containing points for start, end and control points of a curve.

- `Number` Object

  w Width used to calculate the number of points to describe the curve.

- `Number` Object

  h Height used to calculate the number of points to describe the curve.

### `_toRGB`

(

- `val`

)
private

Defined in `graphics/js/CanvasDrawing.js:102`

Converts color to rgb format

#### Parameters:

- `val` Object

  Color value to convert.

### `_toRGBA`

(

- `val`
- `alpha`

)
private

Defined in `graphics/js/CanvasDrawing.js:78`

Parses hex color string and alpha value to rgba

#### Parameters:

- `val` Object

  Color value to parse. Can be hex string, rgb or name.

- `alpha` Number

  Numeric value between 0 and 1 representing the alpha level.

### `_trackSize`

(

- `w`
- `h`

)
private

Defined in `graphics/js/CanvasDrawing.js:1022`

Updates the size of the graphics object

#### Parameters:

- `w` Number

  width

- `h` Number

  height

### `_updateCoords`

(

- `x`
- `y`

)
private

Defined in `graphics/js/CanvasDrawing.js:137`

Tracks coordinates. Used to calculate the start point of dashed lines.

#### Parameters:

- `x` Number

  x-coordinate

- `y` Number

  y-coordinate

### `_updateDrawingQueue`

(

- `val`

)
private

Defined in `graphics/js/CanvasDrawing.js:182`

Queues up a method to be executed when a shape redraws.

#### Parameters:

- `val` Array

  An array containing data that can be parsed into a method and arguments. The value at zero-index of the array is a string reference of the drawing method that will be called. All subsequent indices are argument for that method. For example, `lineTo(10, 100)` would be structured as: `["lineTo", 10, 100]`.

### `_updateNodePosition`

() private

Defined in `graphics/js/CanvasDrawing.js:166`

Moves the shape's dom node.

### `clear`

() chainable

Defined in `graphics/js/CanvasDrawing.js:728`

Clears the graphics object.

### `closePath`

() chainable

Defined in `graphics/js/CanvasDrawing.js:715`

Ends a fill and stroke

### `curveTo`

(

- `cp1x`
- `cp1y`
- `cp2x`
- `cp2y`
- `x`
- `y`

)
chainable

Defined in `graphics/js/CanvasDrawing.js:344`

Draws a bezier curve relative to the current coordinates.

#### Parameters:

- `cp1x` Number

  x-coordinate for the first control point.

- `cp1y` Number

  y-coordinate for the first control point.

- `cp2x` Number

  x-coordinate for the second control point.

- `cp2y` Number

  y-coordinate for the second control point.

- `x` Number

  x-coordinate for the end point.

- `y` Number

  y-coordinate for the end point.

### `curveTo`

(

- `cp1x`
- `cp1y`
- `cp2x`
- `cp2y`
- `x`
- `y`

)
chainable

Defined in `graphics/js/CanvasDrawing.js:327`

Draws a bezier curve.

#### Parameters:

- `cp1x` Number

  x-coordinate for the first control point.

- `cp1y` Number

  y-coordinate for the first control point.

- `cp2x` Number

  x-coordinate for the second control point.

- `cp2y` Number

  y-coordinate for the second control point.

- `x` Number

  x-coordinate for the end point.

- `y` Number

  y-coordinate for the end point.

### `drawCircle`

(

- `x`
- `y`
- `r`

)
protected chainable

Defined in `graphics/js/CanvasDrawing.js:486`

Draws a circle. Used internally by `CanvasCircle` class.

#### Parameters:

- `x` Number

  y-coordinate

- `y` Number

  x-coordinate

- `r` Number

  radius

### `drawDiamond`

(

- `x`
- `y`
- `width`
- `height`

)
protected chainable

Defined in `graphics/js/CanvasDrawing.js:510`

Draws a diamond.

#### Parameters:

- `x` Number

  y-coordinate

- `y` Number

  x-coordinate

- `width` Number

  width

- `height` Number

  height

### `drawEllipse`

(

- `x`
- `y`
- `w`
- `h`

)
protected chainable

Defined in `graphics/js/CanvasDrawing.js:533`

Draws an ellipse. Used internally by `CanvasEllipse` class.

#### Parameters:

- `x` Number

  x-coordinate

- `y` Number

  y-coordinate

- `w` Number

  width

- `h` Number

  height

### `drawRect`

(

- `x`
- `y`
- `w`
- `h`

)
chainable

Defined in `graphics/js/CanvasDrawing.js:576`

Draws a rectangle.

#### Parameters:

- `x` Number

  x-coordinate

- `y` Number

  y-coordinate

- `w` Number

  width

- `h` Number

  height

### `drawRect`

(

- `x`
- `y`
- `w`
- `h`
- `ew`
- `eh`

)
chainable

Defined in `graphics/js/CanvasDrawing.js:596`

Draws a rectangle with rounded corners.

#### Parameters:

- `x` Number

  x-coordinate

- `y` Number

  y-coordinate

- `w` Number

  width

- `h` Number

  height

- `ew` Number

  width of the ellipse used to draw the rounded corners

- `eh` Number

  height of the ellipse used to draw the rounded corners

### `drawWedge`

(

- `x`
- `y`
- `startAngle`
- `arc`
- `radius`
- `yRadius`

)
private chainable

Defined in `graphics/js/CanvasDrawing.js:622`

Draws a wedge.

#### Parameters:

- `x` Number

  x-coordinate of the wedge's center point

- `y` Number

  y-coordinate of the wedge's center point

- `startAngle` Number

  starting angle in degrees

- `arc` Number

  sweep of the wedge. Negative values draw clockwise.

- `radius` Number

  radius of wedge. If [optional] yRadius is defined, then radius is the x radius.

- `yRadius` Number

  [optional] y radius for wedge.

### `end`

() chainable

Defined in `graphics/js/CanvasDrawing.js:704`

Completes a drawing operation.

### `getBezierData`

(

- `Array`
- `Number`

)
private

Defined in `graphics/js/CanvasDrawing.js:958`

Returns the points on a curve

#### Parameters:

- `Array` Object

  points Array containing the begin, end and control points of a curve.

- `Number` Object

  t The value for incrementing the next set of points.

#### Returns:

Array

### `lineTo`

(

- `point1`
- `point2`

)
chainable

Defined in `graphics/js/CanvasDrawing.js:211`

Draws a line segment from the current drawing position to the relative x and y coordinates.

#### Parameters:

- `point1` Number

  x-coordinate for the end point.

- `point2` Number

  y-coordinate for the end point.

### `lineTo`

(

- `point1`
- `point2`

)
chainable

Defined in `graphics/js/CanvasDrawing.js:197`

Draws a line segment from the current drawing position to the specified x and y coordinates.

#### Parameters:

- `point1` Number

  x-coordinate for the end point.

- `point2` Number

  y-coordinate for the end point.

### `moveTo`

(

- `x`
- `y`

)
chainable

Defined in `graphics/js/CanvasDrawing.js:277`

Moves the current drawing position to specified x and y coordinates.

#### Parameters:

- `x` Number

  x-coordinate for the end point.

- `y` Number

  y-coordinate for the end point.

### `quadraticCurveTo`

(

- `cpx`
- `cpy`
- `x`
- `y`

)
chainable

Defined in `graphics/js/CanvasDrawing.js:411`

Draws a quadratic bezier curve.

#### Parameters:

- `cpx` Number

  x-coordinate for the control point.

- `cpy` Number

  y-coordinate for the control point.

- `x` Number

  x-coordinate for the end point.

- `y` Number

  y-coordinate for the end point.

### `relativeMoveTo`

(

- `x`
- `y`

)
chainable

Defined in `graphics/js/CanvasDrawing.js:291`

Moves the current drawing position relative to specified x and y coordinates.

#### Parameters:

- `x` Number

  x-coordinate for the end point.

- `y` Number

  y-coordinate for the end point.

### `relativeQuadraticCurveTo`

(

- `cpx`
- `cpy`
- `x`
- `y`

)
chainable

Defined in `graphics/js/CanvasDrawing.js:426`

Draws a quadratic bezier curve relative to the current position.

#### Parameters:

- `cpx` Number

  x-coordinate for the control point.

- `cpy` Number

  y-coordinate for the control point.

- `x` Number

  x-coordinate for the end point.

- `y` Number

  y-coordinate for the end point.

### `setSize`

(

- `w`
- `h`

)
private

Defined in `graphics/js/CanvasDrawing.js:113`

Sets the size of the graphics object.

#### Parameters:

- `w` Number

  width to set for the instance.

- `h` Number

  height to set for the instance.

## Properties

### `_currentX`

Number private

Defined in `graphics/js/CanvasDrawing.js:60`

Current x position of the drawing.

### `_currentY`

Number private

Defined in `graphics/js/CanvasDrawing.js:69`

Current y position of the drqwing.

### `_drawingComplete`

Boolean private

Defined in `graphics/js/CanvasDrawing.js:937`

Indicates a drawing has completed.

### `_pathSymbolToMethod`

Object private

Defined in `graphics/js/CanvasDrawing.js:40`

Maps path to methods