Show:

<a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> implementation of the <a href="Drawing.html">Drawing</a> class. CanvasDrawing is not intended to be used directly. Instead, use the <a href="Drawing.html">Drawing</a> class. If the browser lacks <a href="http://www.w3.org/TR/SVG/">SVG</a> capabilities but has <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> capabilities, the <a href="Drawing.html">Drawing</a> class will point to the CanvasDrawing class.

Methods

_clearAndUpdateCoords

() private

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

_createGraphic

() private

Creates canvas element

Returns:

HTMLCanvasElement

_curveTo

(
  • args
  • relative
)
private

Implements curveTo methods.

Parameters:

  • args Array

    The arguments to be used.

  • relative Boolean

    Indicates whether or not to use relative coordinates.

_getLinearGradient

() private

Returns a linear gradient fill

Returns:

CanvasGradient

_getRadialGradient

() private

Returns a radial gradient fill

Returns:

CanvasGradient

_initProps

() private

Clears all values

_lineTo

(
  • args
  • relative
)
private

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

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

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

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

Converts color to rgb format

Parameters:

  • val Object

    Color value to convert.

_toRGBA

(
  • val
  • alpha
)
private

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

Updates the size of the graphics object

Parameters:

_updateCoords

(
  • x
  • y
)
private

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

Parameters:

_updateDrawingQueue

(
  • val
)
private

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

Moves the shape's dom node.

clear

() chainable

Clears the graphics object.

closePath

() chainable

Ends a fill and stroke

curveTo

(
  • cp1x
  • cp1y
  • cp2x
  • cp2y
  • x
  • y
)
chainable

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

Draws a circle. Used internally by CanvasCircle class.

Parameters:

drawDiamond

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

Draws a diamond.

Parameters:

drawEllipse

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

Draws an ellipse. Used internally by CanvasEllipse class.

Parameters:

drawRect

(
  • x
  • y
  • w
  • h
)
chainable

Draws a rectangle.

Parameters:

drawRect

(
  • x
  • y
  • w
  • h
  • ew
  • eh
)
chainable

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

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

Completes a drawing operation.

getBezierData

(
  • Array
  • Number
)
private

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

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

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

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

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

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

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

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

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

Current x position of the drawing.

_currentY

Number private

Current y position of the drqwing.

_drawingComplete

Boolean private

Indicates a drawing has completed.

_pathSymbolToMethod

Object private

Maps path to methods