API Docs for: 3.18.1

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

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.

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

end

() chainable

Defined in graphics/js/CanvasDrawing.js:704

Completes a drawing operation.

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.

Properties