#

API Docs for: 3.10.3
Show: Inherited Protected Private Deprecated

# CanvasShape Class

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

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

- Index
- Methods
- Properties
- Attributes

## Item Index

### Methods

- _addTransform
- _closePath
- _draw
- _drawDashedLine
- _getContentRect
- _getDefaultFill
- _getDefaultStroke
- _initialize
- _parsePathData
- _setFillProps
- _setGraphic
- _strokeAndFill
- _strokeChangeHandler
- _updateHandler
- _updateTransform
- addClass
- compareTo
- contains
- createNode
- destroy
- destroy
- getBounds
- getXY
- init
- on
- removeClass
- rotate
- scale
- set
- setXY
- skew
- skewX
- skewY
- test
- toFront
- toFront
- translate
- translateX
- translateY

### Properties

- _bottom
- _left
- _right
- _top
- _transform

### Attributes

- data
- fill
- graphic
- height
- id
- node
- stroke
- transform
- transformOrigin
- visible
- width
- x
- y

## Methods

### `_addTransform`

(

- `type`
- `args`

)
private

Defined in `graphics/js/CanvasShape.js:541`

Adds a transform to the shape.

#### Parameters:

- `type` String

  The transform being applied.

- `args` Array

  The arguments for the transform.

### `_closePath`

() private

Defined in `graphics/js/CanvasShape.js:627`

Completes a shape or drawing

### `_draw`

() private

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

Updates the shape.

### `_drawDashedLine`

(

- `xStart`
- `yStart`
- `xEnd`
- `yEnd`

)
private

Defined in `graphics/js/CanvasShape.js:756`

Draws a dashed line between two points.

#### Parameters:

- `xStart` Number

  The x position of the start of the line

- `yStart` Number

  The y position of the start of the line

- `xEnd` Number

  The x position of the end of the line

- `yEnd` Number

  The y position of the end of the line

### `_getContentRect`

(

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

)
private

Defined in `graphics/js/CanvasShape.js:832`

Calculates the bounding box for the shape.

#### Parameters:

- `w` Number

  width of the shape

- `h` Number

  height of the shape

- `x` Number

  x-coordinate of the shape

- `y` Number

  y-coordinate of the shape

### `_getDefaultFill`

() private

Defined in `graphics/js/CanvasShape.js:180`

Value function for fill attribute

#### Returns:

Object

### `_getDefaultStroke`

() private

Defined in `graphics/js/CanvasShape.js:199`

Value function for stroke attribute

#### Returns:

Object

### `_initialize`

() private

Defined in `graphics/js/CanvasShape.js:34`

Initializes the shape

### `_parsePathData`

(

- `val`

)
private

Defined in `graphics/js/CanvasShape.js:904`

Parses path data string and call mapped methods.

#### Parameters:

- `val` String

  The path data

### `_setFillProps`

(

- `fill`

)
private

Defined in `graphics/js/CanvasShape.js:387`

Adds a fill to the shape node.

#### Parameters:

- `fill` Object

  Properties of the `fill` attribute.

### `_setGraphic`

(

- `render`

)
private

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

Set the Graphic instance for the shape.

#### Parameters:

- `render` Graphic | Node | HTMLElement | String

  This param is used to determine the graphic instance. If it is a `Graphic` instance, it will be assigned to the `graphic` attribute. Otherwise, a new Graphic instance will be created and rendered into the dom element that the render represents.

### `_strokeAndFill`

(

- `Reference`

)
private

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

Completes a stroke and/or fill operation on the context.

#### Parameters:

- `Reference` Context

  to the context element of the canvas instance.

### `_strokeChangeHandler`

(

- `stroke`

)
private

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

Adds a stroke to the shape node.

#### Parameters:

- `stroke` Object

  Properties of the `stroke` attribute.

### `_updateHandler`

() private

Defined in `graphics/js/CanvasShape.js:600`

Updates `Shape` based on attribute changes.

### `_updateTransform`

() private

Defined in `graphics/js/CanvasShape.js:561`

Applies all transforms.

### `addClass`

(

- `className`

)

Defined in `graphics/js/CanvasShape.js:87`

Add a class name to each node.

#### Parameters:

- `className` String

  the class name to add to the node's class attribute

### `compareTo`

(

- `refNode`

)
Boolean

Defined in `graphics/js/CanvasShape.js:168`

Compares nodes to determine if they match. Node instances can be compared to each other and/or HTMLElements.

#### Parameters:

- `refNode` HTMLElement | Node

  The reference node to compare to the node.

#### Returns:

Boolean: True if the nodes match, false if they do not.

### `contains`

(

- `needle`

)

Defined in `graphics/js/CanvasShape.js:143`

Determines whether the node is an ancestor of another HTML element in the DOM hierarchy.

#### Parameters:

- `needle` CanvasShape | HTMLElement

  The possible node or descendent

#### Returns:

Boolean Whether or not this shape is the needle or its ancestor.

### `createNode`

() private

Defined in `graphics/js/CanvasShape.js:252`

Creates the dom node for the shape.

#### Returns:

HTMLElement

### `destroy`

()

Defined in `graphics/js/CanvasShape.js:947`

Destroys the shape instance.

### `destroy`

() protected

Defined in `graphics/js/CanvasShape.js:965`

Implementation for shape destruction

### `getBounds`

()

Defined in `graphics/js/CanvasShape.js:806`

Returns the bounds for a shape.

Calculates the a new bounding box from the original corner coordinates (base on size and position) and the transform matrix. The calculated bounding box is used by the graphic instance to calculate its viewBox.

#### Returns:

Object

### `getXY`

()

Defined in `graphics/js/CanvasShape.js:111`

Gets the current position of the node in page coordinates.

#### Returns:

Array The XY position of the shape.

### `init`

() protected

Defined in `graphics/js/CanvasShape.js:22`

Init method, invoked during construction. Calls `initializer` method.

### `on`

(

- `type`
- `callback`

)
private

Defined in `graphics/js/CanvasShape.js:287`

Overrides default `on` method. Checks to see if its a dom interaction event. If so, return an event attached to the `node` element. If not, return the normal functionality.

#### Parameters:

- `type` String

  event type

- `callback` Object

  function

### `removeClass`

(

- `className`

)

Defined in `graphics/js/CanvasShape.js:99`

Removes a class name from each node.

#### Parameters:

- `className` String

  the class name to remove from the node's class attribute

### `rotate`

(

- `deg`

)

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

Rotates the shape clockwise around it transformOrigin.

#### Parameters:

- `deg` Number

  The degree of the rotation.

### `scale`

(

- `val`

)

Defined in `graphics/js/CanvasShape.js:521`

Specifies a 2d scaling operation.

#### Parameters:

- `val` Number

### `set`

(

- `name`
- `value`

)

Defined in `graphics/js/CanvasShape.js:368`

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.

### `setXY`

(

- `Contains`

)

Defined in `graphics/js/CanvasShape.js:126`

Set the position of the shape in page coordinates, regardless of how the node is positioned.

#### Parameters:

- `Contains` Array

  X & Y values for new position (coordinates are page-based)

### `skew`

(

- `x`
- `y`

)

Defined in `graphics/js/CanvasShape.js:476`

Skews the shape around the x-axis and y-axis.

#### Parameters:

- `x` Number

  The value to skew on the x-axis.

- `y` Number

  The value to skew on the y-axis.

### `skewX`

(

- `x`

)

Defined in `graphics/js/CanvasShape.js:488`

Skews the shape around the x-axis.

#### Parameters:

- `x` Number

  x-coordinate

### `skewY`

(

- `y`

)

Defined in `graphics/js/CanvasShape.js:499`

Skews the shape around the y-axis.

#### Parameters:

- `y` Number

  y-coordinate

### `test`

(

- `selector`

)

Defined in `graphics/js/CanvasShape.js:155`

Test if the supplied node matches the supplied selector.

#### Parameters:

- `selector` String

  The CSS selector to test against.

#### Returns:

Boolean Wheter or not the shape matches the selector.

### `toFront`

()

Defined in `graphics/js/CanvasShape.js:876`

Places the shape above all other shapes.

### `toFront`

()

Defined in `graphics/js/CanvasShape.js:890`

Places the shape underneath all other shapes.

### `translate`

(

- `x`
- `y`

)

Defined in `graphics/js/CanvasShape.js:436`

Specifies a 2d translation.

#### Parameters:

- `x` Number

  The value to transate on the x-axis.

- `y` Number

  The value to translate on the y-axis.

### `translateX`

(

- `x`

)

Defined in `graphics/js/CanvasShape.js:450`

Translates the shape along the x-axis. When translating x and y coordinates, use the `translate` method.

#### Parameters:

- `x` Number

  The value to translate.

### `translateY`

(

- `y`

)

Defined in `graphics/js/CanvasShape.js:463`

Performs a translate on the y-coordinate. When translating x and y coordinates, use the `translate` method.

#### Parameters:

- `y` Number

  The value to translate.

## Properties

### `_bottom`

Number private

Defined in `graphics/js/CanvasShape.js:243`

Bottom edge of the path

### `_left`

Number private

Defined in `graphics/js/CanvasShape.js:216`

Left edge of the path

### `_right`

Number private

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

Right edge of the path

### `_top`

Number private

Defined in `graphics/js/CanvasShape.js:234`

Top edge of the path

### `_transform`

String private

Defined in `graphics/js/CanvasShape.js:532`

Storage for the transform attribute.

## Attributes

### `data`

String

Defined in `graphics/js/CanvasShape.js:1274`

Represents an SVG Path string. This will be parsed and added to shape's API to represent the SVG data across all implementations. Note that when using VML or SVG implementations, part of this content will be added to the DOM using respective VML/SVG attributes. If your content comes from an untrusted source, you will need to ensure that no malicious code is included in that content.

### `fill`

Object

Defined in `graphics/js/CanvasShape.js:1141`

Contains information about the fill of the shape.

color
  The color of the fill.
opacity
  Number between 0 and 1 that indicates the opacity of the fill. The default value is 1.
type
  Type of fill.
  solid
    Solid single color fill. (default)
  linear
    Linear gradient fill.
  radial
    Radial gradient fill.

If a `linear` or `radial` is specified as the fill type. The following additional property is used:

stops
  An array of objects containing the following properties:
  color
    The color of the stop.
  opacity
    Number between 0 and 1 that indicates the opacity of the stop. The default value is 1. Note: No effect for IE 6 - 8
  offset
    Number between 0 and 1 indicating where the color stop is positioned.

Linear gradients also have the following property:

rotation
  Linear gradients flow left to right by default. The rotation property allows you to change the flow by rotation. (e.g. A rotation of 180 would make the gradient pain from right to left.)

Radial gradients have the following additional properties:

r
  Radius of the gradient circle.
fx
  Focal point x-coordinate of the gradient.
fy
  Focal point y-coordinate of the gradient.

The corresponding `SVGShape` class implements the following additional properties.

cx

  The x-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.

  Note: Currently, this property is not implemented for corresponding `CanvasShape` and `VMLShape` classes which are used on Android or IE 6 - 8.

cy

  The y-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.

  Note: Currently, this property is not implemented for corresponding `CanvasShape` and `VMLShape` classes which are used on Android or IE 6 - 8.

These properties are not currently implemented in `CanvasShape` or `VMLShape`.

### `graphic`

Graphic

Defined in `graphics/js/CanvasShape.js:1294`

Reference to the container Graphic.

### `height`

Number

Defined in `graphics/js/CanvasShape.js:1091`

Indicates the height of the shape

### `id`

String

Defined in `graphics/js/CanvasShape.js:1058`

Unique id for class instance.

### `node`

HTMLElement readonly

Defined in `graphics/js/CanvasShape.js:1042`

Dom node for the shape

### `stroke`

Object

Defined in `graphics/js/CanvasShape.js:1210`

Contains information about the stroke of the shape.

color
  The color of the stroke.
weight
  Number that indicates the width of the stroke.
opacity
  Number between 0 and 1 that indicates the opacity of the stroke. The default value is 1.
dashstyle
Indicates whether to draw a dashed stroke. When set to "none", a solid stroke is drawn. When set to an array, the first index indicates the length of the dash. The second index indicates the length of gap.
linecap
  Specifies the linecap for the stroke. The following values can be specified:
  butt (default)
    Specifies a butt linecap.
  square
    Specifies a sqare linecap.
  round
    Specifies a round linecap.
linejoin
  Specifies a linejoin for the stroke. The following values can be specified:
  round (default)
    Specifies that the linejoin will be round.
  bevel
    Specifies a bevel for the linejoin.
  miter limit
    An integer specifying the miter limit of a miter linejoin. If you want to specify a linejoin of miter, you simply specify the limit as opposed to having separate miter and miter limit values.

### `transform`

String

Defined in `graphics/js/CanvasShape.js:997`

A string containing, in order, transform operations applied to the shape instance. The `transform` string can contain the following values:

rotate
  Rotates the shape clockwise around it transformOrigin.
translate
  Specifies a 2d translation.
skew
  Skews the shape around the x-axis and y-axis.
scale
  Specifies a 2d scaling operation.
translateX
  Translates the shape along the x-axis.
translateY
  Translates the shape along the y-axis.
skewX
  Skews the shape around the x-axis.
skewY
  Skews the shape around the y-axis.
matrix
  Specifies a 2D transformation matrix comprised of the specified six values.

Applying transforms through the transform attribute will reset the transform matrix and apply a new transform. The shape class also contains corresponding methods for each transform that will apply the transform to the current matrix. The below code illustrates how you might use the `transform` attribute to instantiate a recangle with a rotation of 45 degrees.

           var myRect = new Y.Rect({
               type:"rect",
               width: 50,
               height: 40,
               transform: "rotate(45)"
           };

The code below would apply `translate` and `rotate` to an existing shape.

       myRect.set("transform", "translate(40, 50) rotate(45)");

### `transformOrigin`

Array

Defined in `graphics/js/CanvasShape.js:983`

An array of x, y values which indicates the transformOrigin in which to rotate the shape. Valid values range between 0 and 1 representing a fraction of the shape's corresponding bounding box dimension. The default value is [0.5, 0.5].

### `visible`

Boolean

Defined in `graphics/js/CanvasShape.js:1121`

Indicates whether the shape is visible.

### `width`

Number

Defined in `graphics/js/CanvasShape.js:1081`

Indicates the width of the shape

### `x`

Number

Defined in `graphics/js/CanvasShape.js:1101`

Indicates the x position of shape.

### `y`

Number

Defined in `graphics/js/CanvasShape.js:1111`

Indicates the y position of shape.