API Docs for: 3.18.1
Show:

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.

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:

_updateCoords

(
  • x
  • y
)
private

Defined in graphics/js/CanvasDrawing.js:137

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

Parameters:

_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: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:

drawDiamond

(
  • x
  • y
  • width
  • height
)
protected chainable

Defined in graphics/js/CanvasDrawing.js:510

Draws a diamond.

Parameters:

drawEllipse

(
  • x
  • y
  • w
  • h
)
protected chainable

Defined in graphics/js/CanvasDrawing.js:533

Draws an ellipse. Used internally by CanvasEllipse class.

Parameters:

drawRect

(
  • x
  • y
  • w
  • h
)
chainable

Defined in graphics/js/CanvasDrawing.js:576

Draws a rectangle.

Parameters:

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: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.

relativeCurveTo

(
  • 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.

relativeLineTo

(
  • 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.

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