Class: Shape

Kinetic. Shape

Constructor

new Shape(config)

Shape constructor. Shapes are primitive objects such as rectangles, circles, text, lines, etc.
Parameters:
Name Type Description
config Object
Properties
Name Type Attributes Description
fill String <optional>
fill color
fillRed Integer <optional>
set fill red component
fillGreen Integer <optional>
set fill green component
fillBlue Integer <optional>
set fill blue component
fillAlpha Integer <optional>
set fill alpha component
fillPatternImage Image <optional>
fill pattern image
fillPatternX Number <optional>
fillPatternY Number <optional>
fillPatternOffset Object <optional>
object with x and y component
fillPatternOffsetX Number <optional>
fillPatternOffsetY Number <optional>
fillPatternScale Object <optional>
object with x and y component
fillPatternScaleX Number <optional>
fillPatternScaleY Number <optional>
fillPatternRotation Number <optional>
fillPatternRepeat String <optional>
can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat"
fillLinearGradientStartPoint Object <optional>
object with x and y component
fillLinearGradientStartPointX Number <optional>
fillLinearGradientStartPointY Number <optional>
fillLinearGradientEndPoint Object <optional>
object with x and y component
fillLinearGradientEndPointX Number <optional>
fillLinearGradientEndPointY Number <optional>
fillLinearGradientColorStops Array <optional>
array of color stops
fillRadialGradientStartPoint Object <optional>
object with x and y component
fillRadialGradientStartPointX Number <optional>
fillRadialGradientStartPointY Number <optional>
fillRadialGradientEndPoint Object <optional>
object with x and y component
fillRadialGradientEndPointX Number <optional>
fillRadialGradientEndPointY Number <optional>
fillRadialGradientStartRadius Number <optional>
fillRadialGradientEndRadius Number <optional>
fillRadialGradientColorStops Array <optional>
array of color stops
fillEnabled Boolean <optional>
flag which enables or disables the fill. The default value is true
fillPriority String <optional>
can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
stroke String <optional>
stroke color
strokeRed Integer <optional>
set stroke red component
strokeGreen Integer <optional>
set stroke green component
strokeBlue Integer <optional>
set stroke blue component
strokeAlpha Integer <optional>
set stroke alpha component
strokeWidth Number <optional>
stroke width
strokeScaleEnabled Boolean <optional>
flag which enables or disables stroke scale. The default is true
strokeEnabled Boolean <optional>
flag which enables or disables the stroke. The default value is true
lineJoin String <optional>
can be miter, round, or bevel. The default is miter
lineCap String <optional>
can be butt, round, or sqare. The default is butt
shadowColor String <optional>
shadowRed Integer <optional>
set shadow color red component
shadowGreen Integer <optional>
set shadow color green component
shadowBlue Integer <optional>
set shadow color blue component
shadowAlpha Integer <optional>
set shadow color alpha component
shadowBlur Number <optional>
shadowOffset Object <optional>
object with x and y component
shadowOffsetX Number <optional>
shadowOffsetY Number <optional>
shadowOpacity Number <optional>
shadow opacity. Can be any real number between 0 and 1
shadowEnabled Boolean <optional>
flag which enables or disables the shadow. The default value is true
dash Array <optional>
dashEnabled Boolean <optional>
flag which enables or disables the dashArray. The default value is true
x Number <optional>
y Number <optional>
width Number <optional>
height Number <optional>
visible Boolean <optional>
listening Boolean <optional>
whether or not the node is listening for events
id String <optional>
unique id
name String <optional>
non-unique name
opacity Number <optional>
determines node opacity. Can be any number between 0 and 1
scale Object <optional>
set scale
scaleX Number <optional>
set scale x
scaleY Number <optional>
set scale y
rotation Number <optional>
rotation in degrees
offset Object <optional>
offset from center point and rotation point
offsetX Number <optional>
set offset x
offsetY Number <optional>
set offset y
draggable Boolean <optional>
makes the node draggable. When stages are draggable, you can drag and drop the entire stage by dragging any portion of the stage
dragDistance Number <optional>
dragBoundFunc function <optional>
Source:
Example
var customShape = new Kinetic.Shape({<br>
  x: 5,<br>
  y: 10,<br>
  fill: 'red',<br>
  // a Kinetic.Canvas renderer is passed into the drawFunc function<br>
  drawFunc: function(context) {<br>
    context.beginPath();<br>
    context.moveTo(200, 50);<br>
    context.lineTo(420, 80);<br>
    context.quadraticCurveTo(300, 100, 260, 170);<br>
    context.closePath();<br>
    context.fillStrokeShape(this);<br>
  }<br>
});

Extends

Members

dragDistance

get/set drag distance
Inherited From:
Overrides:
Source:
Example
// get drag distance<br>
var dragDistance = node.dragDistance();<br><br>

// set distance<br>
// node starts dragging only if pointer moved more then 3 pixels<br>
node.dragDistance(3);<br>
// or set globally<br>
Kinetic.dragDistance = 3;

offsetX

get/set offset x
Inherited From:
Overrides:
Source:
Example
// get offset x<br>
var offsetX = node.offsetX();<br><br>

// set offset x<br>
node.offsetX(3);

Methods

blue(blue) → {Integer}

get/set filter blue value
Parameters:
Name Type Description
blue Integer value between 0 and 255
Inherited From:
Overrides:
Source:
Returns:
Type
Integer

blurRadius(radius) → {Integer}

get/set blur radius
Parameters:
Name Type Description
radius Integer
Inherited From:
Overrides:
Source:
Returns:
Type
Integer

cache(config) → {Kinetic.Node}

cache node to improve drawing performance, apply filters, or create more accurate hit regions
Parameters:
Name Type Description
config Object
Properties
Name Type Attributes Description
x Number <optional>
y Number <optional>
width Number <optional>
height Number <optional>
drawBorder Boolean <optional>
when set to true, a red border will be drawn around the cached region for debugging purposes
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Node
Example
// cache a shape with the x,y position of the bounding box at the center and<br>
// the width and height of the bounding box equal to the width and height of<br>
// the shape obtained from shape.width() and shape.height()<br>
image.cache();<br><br>

// cache a node and define the bounding box position and size<br>
node.cache({<br>
  x: -30,<br>
  y: -30,<br>
  width: 100,<br>
  height: 200<br>
});<br><br>

// cache a node and draw a red border around the bounding box<br>
// for debugging purposes<br>
node.cache({<br>
  x: -30,<br>
  y: -30,<br>
  width: 100,<br>
  height: 200,<br>
  drawBorder: true<br>
});

clearCache() → {Kinetic.Node}

clear cached canvas
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Node
Example
node.clearCache();

clone(attrs) → {Kinetic.Node}

clone node. Returns a new Node instance with identical attributes. You can also override the node properties with an object literal, enabling you to use an existing node as a template for another node
Parameters:
Name Type Description
attrs Object override attrs
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Node
Example
// simple clone<br>
var clone = node.clone();<br><br>

// clone a node and override the x position<br>
var clone = rect.clone({<br>
  x: 5<br>
});

dash(dash) → {Array}

get/set dash array for stroke.
Parameters:
Name Type Description
dash Array
Source:
Returns:
Type
Array
Example
// apply dashed stroke that is 10px long and 5 pixels apart<br>
 line.dash([10, 5]);<br><br>
 
 // apply dashed stroke that is made up of alternating dashed<br> 
 // lines that are 10px long and 20px apart, and dots that have<br> 
 // a radius of 5px and are 20px apart<br>
 line.dash([10, 20, 0.001, 20]);

dashEnabled(enabled) → {Boolean}

get/set dash enabled flag
Parameters:
Name Type Description
enabled Boolean
Source:
Returns:
Type
Boolean
Example
// get dash enabled flag<br>
var dashEnabled = shape.dashEnabled();<br><br>

// disable dash<br>
shape.dashEnabled(false);<br><br>

// enable dash<br>
shape.dashEnabled(true);

dragBoundFunc(dragBoundFunc) → {function}

get/set drag bound function. This is used to override the default drag and drop position
Parameters:
Name Type Description
dragBoundFunc function
Inherited From:
Overrides:
Source:
Returns:
Type
function
Example
// get drag bound function<br>
var dragBoundFunc = node.dragBoundFunc();<br><br>

// create vertical drag and drop<br>
node.dragBoundFunc(function(){<br>
  return {<br>
    x: this.getAbsolutePosition().x,<br>
    y: pos.y<br>
  };<br>
});

draggable(draggable) → {Boolean}

get/set draggable flag
Parameters:
Name Type Description
draggable Boolean
Inherited From:
Overrides:
Source:
Returns:
Type
Boolean
Example
// get draggable flag<br>
var draggable = node.draggable();<br><br>

// enable drag and drop<br>
node.draggable(true);<br><br>

// disable drag and drop<br>
node.draggable(false);

draw() → {Kinetic.Node}

draw both scene and hit graphs. If the node being drawn is the stage, all of the layers will be cleared and redrawn
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Node

drawHitFromCache(alphaThreshold) → {Kinetic.Shape}

draw hit graph using the cached scene canvas
Parameters:
Name Type Description
alphaThreshold Integer alpha channel threshold that determines whether or not a pixel should be drawn onto the hit graph. Must be a value between 0 and 255. The default is 0
Source:
Returns:
Type
Kinetic.Shape
Example
shape.cache();
shape.drawHitFromCache();

embossBlend(embossBlend) → {Boolean}

get/set emboss blend
Parameters:
Name Type Description
embossBlend Boolean
Inherited From:
Overrides:
Source:
Returns:
Type
Boolean

embossDirection(embossDirection) → {String}

get/set emboss direction
Parameters:
Name Type Description
embossDirection String can be top-left, top, top-right, right, bottom-right, bottom, bottom-left or left The default is top-left
Inherited From:
Overrides:
Source:
Returns:
Type
String

embossStrength(level) → {Number}

get/set emboss strength
Parameters:
Name Type Description
level Number between 0 and 1. Default is 0.5
Inherited From:
Overrides:
Source:
Returns:
Type
Number

embossWhiteLevel(embossWhiteLevel) → {Number}

get/set emboss white level
Parameters:
Name Type Description
embossWhiteLevel Number between 0 and 1. Default is 0.5
Inherited From:
Overrides:
Source:
Returns:
Type
Number

enhance(amount) → {Float}

get/set enhance
Parameters:
Name Type Description
amount Float
Inherited From:
Overrides:
Source:
Returns:
Type
Float

fill(color) → {String}

get/set fill color
Parameters:
Name Type Description
color String
Source:
Returns:
Type
String
Example
// get fill color<br>
var fill = shape.fill();<br><br>

// set fill color with color string<br>
shape.fill('green');<br><br>

// set fill color with hex<br>
shape.fill('#00ff00');<br><br>

// set fill color with rgb<br>
shape.fill('rgb(0,255,0)');<br><br>

// set fill color with rgba and make it 50% opaque<br>
shape.fill('rgba(0,255,0,0.5');

fillAlpha(alpha) → {Number}

get/set fill alpha component. Alpha is a real number between 0 and 1. The default is 1.
Parameters:
Name Type Description
alpha Number
Source:
Returns:
Type
Number
Example
// get fill alpha component<br>
var fillAlpha = shape.fillAlpha();<br><br>

// set fill alpha component<br>
shape.fillAlpha(0.5);

fillBlue(blue) → {Integer}

get/set fill blue component
Parameters:
Name Type Description
blue Integer
Source:
Returns:
Type
Integer
Example
// get fill blue component<br>
var fillBlue = shape.fillBlue();<br><br>

// set fill blue component<br>
shape.fillBlue(0);

fillEnabled(enabled) → {Boolean}

get/set fill enabled flag
Parameters:
Name Type Description
enabled Boolean
Source:
Returns:
Type
Boolean
Example
// get fill enabled flag<br>
var fillEnabled = shape.fillEnabled();<br><br>

// disable fill<br>
shape.fillEnabled(false);<br><br>

// enable fill<br>
shape.fillEnabled(true);

fillGreen(green) → {Integer}

get/set fill green component
Parameters:
Name Type Description
green Integer
Source:
Returns:
Type
Integer
Example
// get fill green component<br>
var fillGreen = shape.fillGreen();<br><br>

// set fill green component<br>
shape.fillGreen(255);

fillLinearGradientColorStops(colorStops) → {Array}

get/set fill linear gradient color stops
Parameters:
Name Type Description
colorStops Array
Source:
Returns:
colorStops
Type
Array
Example
// get fill linear gradient color stops<br>
var colorStops = shape.fillLinearGradientColorStops();<br><br>

// create a linear gradient that starts with red, changes to blue <br>
// halfway through, and then changes to green<br>
shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');

fillLinearGradientEndPoint(endPoint) → {Object}

get/set fill linear gradient end point
Parameters:
Name Type Description
endPoint Object
Properties
Name Type Description
x Number
y Number
Source:
Returns:
Type
Object
Example
// get fill linear gradient end point<br>
var endPoint = shape.fillLinearGradientEndPoint();<br><br>

// set fill linear gradient end point<br>
shape.fillLinearGradientEndPoint({<br>
  x: 20<br>
  y: 10<br>
});

fillLinearGradientEndPointX(x) → {Number}

get/set fill linear gradient end point x
Parameters:
Name Type Description
x Number
Source:
Returns:
Type
Number
Example
// get fill linear gradient end point x<br>
var endPointX = shape.fillLinearGradientEndPointX();<br><br>

// set fill linear gradient end point x<br>
shape.fillLinearGradientEndPointX(20);

fillLinearGradientEndPointY(y) → {Number}

get/set fill linear gradient end point y
Parameters:
Name Type Description
y Number
Source:
Returns:
Type
Number
Example
// get fill linear gradient end point y<br>
var endPointY = shape.fillLinearGradientEndPointY();<br><br>

// set fill linear gradient end point y<br>
shape.fillLinearGradientEndPointY(20);

fillLinearGradientStartPoint(startPoint) → {Object}

get/set fill linear gradient start point
Parameters:
Name Type Description
startPoint Object
Properties
Name Type Description
x Number
y Number
Source:
Returns:
Type
Object
Example
// get fill linear gradient start point<br>
var startPoint = shape.fillLinearGradientStartPoint();<br><br>

// set fill linear gradient start point<br>
shape.fillLinearGradientStartPoint({<br>
  x: 20<br>
  y: 10<br>
});

fillLinearGradientStartPointX(x) → {Number}

get/set fill linear gradient start point x
Parameters:
Name Type Description
x Number
Source:
Returns:
Type
Number
Example
// get fill linear gradient start point x<br>
var startPointX = shape.fillLinearGradientStartPointX();<br><br>

// set fill linear gradient start point x<br>
shape.fillLinearGradientStartPointX(20);

fillLinearGradientStartPointY(y) → {Number}

get/set fill linear gradient start point y
Parameters:
Name Type Description
y Number
Source:
Returns:
Type
Number
Example
// get fill linear gradient start point y<br>
var startPointY = shape.fillLinearGradientStartPointY();<br><br>

// set fill linear gradient start point y<br>
shape.fillLinearGradientStartPointY(20);

fillPatternImage(image) → {Image}

get/set fill pattern image
Parameters:
Name Type Description
image Image object
Source:
Returns:
Type
Image
Example
// get fill pattern image<br>
var fillPatternImage = shape.fillPatternImage();<br><br>

// set fill pattern image<br>
var imageObj = new Image();<br>
imageObj.onload = function() {<br>
  shape.fillPatternImage(imageObj);<br>
};<br>
imageObj.src = 'path/to/image/jpg';

fillPatternOffset(offset) → {Object}

get/set fill pattern offset
Parameters:
Name Type Description
offset Object
Properties
Name Type Description
x Number
y Number
Source:
Returns:
Type
Object
Example
// get fill pattern offset<br>
var patternOffset = shape.fillPatternOffset();<br><br>

// set fill pattern offset<br>
shape.fillPatternOffset({<br>
  x: 20<br>
  y: 10<br>
});

fillPatternOffsetX(x) → {Number}

get/set fill pattern offset x
Parameters:
Name Type Description
x Number
Source:
Returns:
Type
Number
Example
// get fill pattern offset x<br>
var patternOffsetX = shape.fillPatternOffsetX();<br><br>

// set fill pattern offset x<br>
shape.fillPatternOffsetX(20);

fillPatternOffsetY(y) → {Number}

get/set fill pattern offset y
Parameters:
Name Type Description
y Number
Source:
Returns:
Type
Number
Example
// get fill pattern offset y<br>
var patternOffsetY = shape.fillPatternOffsetY();<br><br>

// set fill pattern offset y<br>
shape.fillPatternOffsetY(10);

fillPatternRepeat(repeat) → {String}

get/set fill pattern repeat. Can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'repeat'
Parameters:
Name Type Description
repeat String
Source:
Returns:
Type
String
Example
// get fill pattern repeat<br>
var repeat = shape.fillPatternRepeat();<br><br>

// repeat pattern in x direction only<br>
shape.fillPatternRepeat('repeat-x');<br><br>

// do not repeat the pattern<br>
shape.fillPatternRepeat('no repeat');

fillPatternRotation(rotation) → {Kinetic.Shape}

get/set fill pattern rotation in degrees
Parameters:
Name Type Description
rotation Number
Source:
Returns:
Type
Kinetic.Shape
Example
// get fill pattern rotation<br>
var patternRotation = shape.fillPatternRotation();<br><br>

// set fill pattern rotation<br>
shape.fillPatternRotation(20);

fillPatternScale(scale) → {Object}

get/set fill pattern scale
Parameters:
Name Type Description
scale Object
Properties
Name Type Description
x Number
y Number
Source:
Returns:
Type
Object
Example
// get fill pattern scale<br>
var patternScale = shape.fillPatternScale();<br><br>

// set fill pattern scale<br>
shape.fillPatternScale({<br>
  x: 2<br>
  y: 2<br>
});

fillPatternScaleX(x) → {Number}

get/set fill pattern scale x
Parameters:
Name Type Description
x Number
Source:
Returns:
Type
Number
Example
// get fill pattern scale x<br>
var patternScaleX = shape.fillPatternScaleX();<br><br>

// set fill pattern scale x<br>
shape.fillPatternScaleX(2);

fillPatternScaleY(y) → {Number}

get/set fill pattern scale y
Parameters:
Name Type Description
y Number
Source:
Returns:
Type
Number
Example
// get fill pattern scale y<br>
var patternScaleY = shape.fillPatternScaleY();<br><br>

// set fill pattern scale y<br>
shape.fillPatternScaleY(2);

fillPatternX(x) → {Number}

get/set fill pattern x
Parameters:
Name Type Description
x Number
Source:
Returns:
Type
Number
Example
// get fill pattern x<br>
var fillPatternX = shape.fillPatternX();<br><br>

// set fill pattern x<br>
shape.fillPatternX(20);

fillPatternY(y) → {Number}

get/set fill pattern y
Parameters:
Name Type Description
y Number
Source:
Returns:
Type
Number
Example
// get fill pattern y<br>
var fillPatternY = shape.fillPatternY();<br><br>

// set fill pattern y<br>
shape.fillPatternY(20);

fillPriority(priority) → {String}

get/set fill priority. can be color, pattern, linear-gradient, or radial-gradient. The default is color. This is handy if you want to toggle between different fill types.
Parameters:
Name Type Description
priority String
Source:
Returns:
Type
String
Example
// get fill priority<br>
var fillPriority = shape.fillPriority();<br><br>

// set fill priority<br>
shape.fillPriority('linear-gradient');

fillRadialGradientColorStops(colorStops) → {Array}

get/set fill radial gradient color stops
Parameters:
Name Type Description
colorStops Number
Source:
Returns:
Type
Array
Example
// get fill radial gradient color stops<br>
var colorStops = shape.fillRadialGradientColorStops();<br><br>

// create a radial gradient that starts with red, changes to blue <br>
// halfway through, and then changes to green<br>
shape.fillRadialGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');

fillRadialGradientEndPoint(endPoint) → {Object}

get/set fill radial gradient end point
Parameters:
Name Type Description
endPoint Object
Properties
Name Type Description
x Number
y Number
Source:
Returns:
Type
Object
Example
// get fill radial gradient end point<br>
var endPoint = shape.fillRadialGradientEndPoint();<br><br>

// set fill radial gradient end point<br>
shape.fillRadialGradientEndPoint({<br>
  x: 20<br>
  y: 10<br>
});

fillRadialGradientEndPointX(x) → {Number}

get/set fill radial gradient end point x
Parameters:
Name Type Description
x Number
Source:
Returns:
Type
Number
Example
// get fill radial gradient end point x<br>
var endPointX = shape.fillRadialGradientEndPointX();<br><br>

// set fill radial gradient end point x<br>
shape.fillRadialGradientEndPointX(20);

fillRadialGradientEndPointY(y) → {Number}

get/set fill radial gradient end point y
Parameters:
Name Type Description
y Number
Source:
Returns:
Type
Number
Example
// get fill radial gradient end point y<br>
var endPointY = shape.fillRadialGradientEndPointY();<br><br>

// set fill radial gradient end point y<br>
shape.fillRadialGradientEndPointY(20);

fillRadialGradientEndRadius(radius) → {Number}

get/set fill radial gradient end radius
Parameters:
Name Type Description
radius Number
Source:
Returns:
Type
Number
Example
// get radial gradient end radius<br>
var endRadius = shape.fillRadialGradientEndRadius();<br><br>

// set radial gradient end radius<br>
shape.fillRadialGradientEndRadius(100);

fillRadialGradientStartPoint(startPoint) → {Object}

get/set fill radial gradient start point
Parameters:
Name Type Description
startPoint Object
Properties
Name Type Description
x Number
y Number
Source:
Returns:
Type
Object
Example
// get fill radial gradient start point<br>
var startPoint = shape.fillRadialGradientStartPoint();<br><br>

// set fill radial gradient start point<br>
shape.fillRadialGradientStartPoint({<br>
  x: 20<br>
  y: 10<br>
});

fillRadialGradientStartPointX(x) → {Number}

get/set fill radial gradient start point x
Parameters:
Name Type Description
x Number
Source:
Returns:
Type
Number
Example
// get fill radial gradient start point x<br>
var startPointX = shape.fillRadialGradientStartPointX();<br><br>

// set fill radial gradient start point x<br>
shape.fillRadialGradientStartPointX(20);

fillRadialGradientStartPointY(y) → {Number}

get/set fill radial gradient start point y
Parameters:
Name Type Description
y Number
Source:
Returns:
Type
Number
Example
// get fill radial gradient start point y<br>
var startPointY = shape.fillRadialGradientStartPointY();<br><br>

// set fill radial gradient start point y<br>
shape.fillRadialGradientStartPointY(20);

fillRadialGradientStartRadius(radius) → {Number}

get/set fill radial gradient start radius
Parameters:
Name Type Description
radius Number
Source:
Returns:
Type
Number
Example
// get radial gradient start radius<br>
var startRadius = shape.fillRadialGradientStartRadius();<br><br>

// set radial gradient start radius<br>
shape.fillRadialGradientStartRadius(0);

fillRed(red) → {Integer}

get/set fill red component
Parameters:
Name Type Description
red Integer
Source:
Returns:
Type
Integer
Example
// get fill red component<br>
var fillRed = shape.fillRed();<br><br>

// set fill red component<br>
shape.fillRed(0);

filters(filters) → {Array}

get/set filters. Filters are applied to cached canvases
Parameters:
Name Type Description
filters Array array of filters
Inherited From:
Overrides:
Source:
Returns:
Type
Array
Example
// get filters<br>
var filters = node.filters();<br><br>

// set a single filter<br>
node.cache();<br>
node.filters([Kinetic.Filters.Blur]);<br><br>

// set multiple filters<br>
node.cache();<br>
node.filters([<br>
  Kinetic.Filters.Blur,<br>
  Kinetic.Filters.Sepia,<br>
  Kinetic.Filters.Invert<br>
]);

fire(eventType, evtopt, bubbleopt) → {Kinetic.Node}

fire event
Parameters:
Name Type Attributes Description
eventType String event type. can be a regular event, like click, mouseover, or mouseout, or it can be a custom event, like myCustomEvent
evt EventObject <optional>
event object
bubble Boolean <optional>
setting the value to false, or leaving it undefined, will result in the event not bubbling. Setting the value to true will result in the event bubbling.
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Node
Example
// manually fire click event<br>
node.fire('click');<br><br>

// fire custom event<br>
node.fire('foo');<br><br>

// fire custom event with custom event object<br>
node.fire('foo', {<br>
  bar: 10<br>
});<br><br>

// fire click event that bubbles<br>
node.fire('click', null, true);

getAbsoluteOpacity() → {Number}

get absolute opacity
Inherited From:
Overrides:
Source:
Returns:
Type
Number

getAbsolutePosition() → {Object}

get absolute position relative to the top left corner of the stage container div
Inherited From:
Overrides:
Source:
Returns:
Type
Object

getAbsoluteTransform() → {Kinetic.Transform}

get absolute transform of the node which takes into account its ancestor transforms
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Transform

getAbsoluteZIndex() → {Integer}

get absolute z-index which takes into account sibling and ancestor indices
Inherited From:
Overrides:
Source:
Returns:
Type
Integer

getAncestors() → {Kinetic.Collection}

get ancestors
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Collection
Example
shape.getAncestors().each(function(node) {
  console.log(node.getId());
})

getAttr(attr) → {Integer|String|Object|Array}

get attr
Parameters:
Name Type Description
attr String
Inherited From:
Overrides:
Source:
Returns:
Type
Integer | String | Object | Array
Example
var x = node.getAttr('x');

getAttrs() → {Object}

get attrs object literal
Inherited From:
Overrides:
Source:
Returns:
Type
Object

getCanvas() → {Kinetic.Canvas}

get canvas renderer tied to the layer. Note that this returns a canvas renderer, not a canvas element
Source:
Returns:
Type
Kinetic.Canvas

getClassName() → {String}

get class name, which may return Stage, Layer, Group, or shape class names like Rect, Circle, Text, etc.
Inherited From:
Overrides:
Source:
Returns:
Type
String

getContext() → {Kinetic.Context}

get canvas context tied to the layer
Source:
Returns:
Type
Kinetic.Context

getDepth() → {Integer}

get node depth in node tree. Returns an integer.

e.g. Stage depth will always be 0. Layers will always be 1. Groups and Shapes will always be >= 2
Inherited From:
Overrides:
Source:
Returns:
Type
Integer

getHeight() → {Integer}

get height
Inherited From:
Overrides:
Source:
Returns:
Type
Integer

getLayer() → {Kinetic.Layer}

get layer ancestor
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Layer

getParent() → {Kinetic.Node}

get parent container
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Node

getStage() → {Kinetic.Stage}

get stage ancestor
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Stage

getTransform() → {Kinetic.Transform}

get transform of the node
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Transform

getType() → {String}

get the node type, which may return Stage, Layer, Group, or Node
Inherited From:
Overrides:
Source:
Returns:
Type
String

getWidth() → {Integer}

get width
Inherited From:
Overrides:
Source:
Returns:
Type
Integer

getZIndex() → {Integer}

get zIndex relative to the node's siblings who share the same parent
Inherited From:
Overrides:
Source:
Returns:
Type
Integer

green(green) → {Integer}

get/set filter green value
Parameters:
Name Type Description
green Integer value between 0 and 255
Inherited From:
Overrides:
Source:
Returns:
Type
Integer

hasFill() → {Boolean}

returns whether or not the shape will be filled
Source:
Returns:
Type
Boolean

hasShadow() → {Boolean}

returns whether or not a shadow will be rendered
Source:
Returns:
Type
Boolean

hasStroke() → {Boolean}

returns whether or not the shape will be stroked
Source:
Returns:
Type
Boolean

height(height) → {Number}

get/set height
Parameters:
Name Type Description
height Number
Inherited From:
Overrides:
Source:
Returns:
Type
Number
Example
// get height<br>
var height = node.height();<br><br>

// set height<br>
node.height(100);

hide() → {Kinetic.Node}

hide node. Hidden nodes are no longer detectable
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Node

hitFunc(drawFunc) → {function}

get/set hit draw function
Parameters:
Name Type Description
drawFunc function drawing function
Source:
Returns:
Type
function
Example
// get hit draw function<br>
var hitFunc = shape.hitFunc();<br><br>

// set hit draw function<br>
shape.hitFunc(function(context) {<br>
  context.beginPath();<br>
  context.rect(0, 0, this.width(), this.height());<br>
  context.closePath();<br>
  context.fillStrokeShape(this);<br>
});

hue(hue) → {Number}

get/set hsv hue in degrees
Parameters:
Name Type Description
hue Number value between 0 and 359
Inherited From:
Overrides:
Source:
Returns:
Type
Number

id(id) → {String}

get/set id
Parameters:
Name Type Description
id String
Inherited From:
Overrides:
Source:
Returns:
Type
String
Example
// get id<br>
var name = node.id();<br><br>

// set id<br>
node.id('foo');

intersects(point) → {Boolean}

determines if point is in the shape, regardless if other shapes are on top of it. Note: because this method clears a temporary canvas and then redraws the shape, it performs very poorly if executed many times consecutively. Please use the Kinetic.Stage#getIntersection method if at all possible because it performs much better
Parameters:
Name Type Description
point Object
Properties
Name Type Description
x Number
y Number
Source:
Returns:
Type
Boolean

isListening() → {Boolean}

determine if node is listening for events by taking into account ancestors. Parent | Self | isListening listening | listening | ----------+-----------+------------ T | T | T T | F | F F | T | T F | F | F ----------+-----------+------------ T | I | T F | I | F I | I | T
Inherited From:
Overrides:
Source:
Returns:
Type
Boolean

isVisible() → {Boolean}

determine if node is visible by taking into account ancestors. Parent | Self | isVisible visible | visible | ----------+-----------+------------ T | T | T T | F | F F | T | T F | F | F ----------+-----------+------------ T | I | T F | I | F I | I | T
Inherited From:
Overrides:
Source:
Returns:
Type
Boolean

kaleidoscopeAngle(degrees) → {Integer}

get/set kaleidoscope angle
Parameters:
Name Type Description
degrees Integer
Inherited From:
Overrides:
Source:
Returns:
Type
Integer

kaleidoscopePower(power) → {Integer}

get/set kaleidoscope power
Parameters:
Name Type Description
power Integer of kaleidoscope
Inherited From:
Overrides:
Source:
Returns:
Type
Integer

levels(level) → {Number}

get/set levels. Must be a number between 0 and 1
Parameters:
Name Type Description
level Number between 0 and 1
Inherited From:
Overrides:
Source:
Returns:
Type
Number

lineCap(lineCap) → {String}

get/set line cap. Can be butt, round, or square
Parameters:
Name Type Description
lineCap String
Source:
Returns:
Type
String
Example
// get line cap<br>
var lineCap = shape.lineCap();<br><br>

// set line cap<br>
shape.lineCap('round');

lineJoin(lineJoin) → {String}

get/set line join. Can be miter, round, or bevel. The default is miter
Parameters:
Name Type Description
lineJoin String
Source:
Returns:
Type
String
Example
// get line join<br>
var lineJoin = shape.lineJoin();<br><br>

// set line join<br>
shape.lineJoin('round');

listening(listening) → {Boolean|String}

get/set listenig attr. If you need to determine if a node is listening or not by taking into account its parents, use the isListening() method
Parameters:
Name Type Description
listening Boolean | String Can be "inherit", true, or false. The default is "inherit".
Inherited From:
Overrides:
Source:
Returns:
Type
Boolean | String
Example
// get listening attr<br>
var listening = node.listening();<br><br>

// stop listening for events<br>
node.listening(false);<br><br>

// listen for events<br>
node.listening(true);<br><br>

// listen to events according to the parent<br>
node.listening('inherit');

move(change) → {Kinetic.Node}

move node by an amount relative to its current position
Parameters:
Name Type Description
change Object
Properties
Name Type Description
x Number
y Number
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Node
Example
// move node in x direction by 1px and y direction by 2px<br>
node.move({<br>
  x: 1,<br>
  y: 2)<br>
});

moveDown() → {Boolean}

move node down
Inherited From:
Overrides:
Source:
Returns:
Type
Boolean

moveToBottom() → {Boolean}

move node to the bottom of its siblings
Inherited From:
Overrides:
Source:
Returns:
Type
Boolean

moveToTop() → {Boolean}

move node to the top of its siblings
Inherited From:
Overrides:
Source:
Returns:
Type
Boolean

moveUp() → {Boolean}

move node up
Inherited From:
Overrides:
Source:
Returns:
Type
Boolean

name(name) → {String}

get/set name
Parameters:
Name Type Description
name String
Inherited From:
Overrides:
Source:
Returns:
Type
String
Example
// get name<br>
var name = node.name();<br><br>

// set name<br>
node.name('foo');

noise(noise) → {Number}

get/set noise amount. Must be a value between 0 and 1
Parameters:
Name Type Description
noise Number
Inherited From:
Overrides:
Source:
Returns:
Type
Number

off(evtStr) → {Kinetic.Node}

remove event bindings from the node. Pass in a string of event types delimmited by a space to remove multiple event bindings at once such as 'mousedown mouseup mousemove'. include a namespace to remove an event binding by name such as 'click.foobar'. If you only give a name like '.foobar', all events in that namespace will be removed.
Parameters:
Name Type Description
evtStr String e.g. 'click', 'mousedown touchstart', '.foobar'
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Node
Example
// remove listener<br>
node.off('click');<br><br>

// remove multiple listeners<br>
node.off('click touchstart');<br><br>

// remove listener by name<br>
node.off('click.foo');

offsetY(y) → {Number}

get/set offset y
Parameters:
Name Type Description
y Number
Inherited From:
Overrides:
Source:
Returns:
Type
Number
Example
// get offset y<br>
var offsetY = node.offsetY();<br><br>

// set offset y<br>
node.offsetY(3);

on(evtStr, handler) → {Kinetic.Node}

bind events to the node. KineticJS supports mouseover, mousemove, mouseout, mouseenter, mouseleave, mousedown, mouseup, click, dblclick, touchstart, touchmove, touchend, tap, dbltap, dragstart, dragmove, and dragend events. The Kinetic Stage supports contentMouseover, contentMousemove, contentMouseout, contentMousedown, contentMouseup, contentClick, contentDblclick, contentTouchstart, contentTouchmove, contentTouchend, contentTap, and contentDblTap. Pass in a string of events delimmited by a space to bind multiple events at once such as 'mousedown mouseup mousemove'. Include a namespace to bind an event by name such as 'click.foobar'.
Parameters:
Name Type Description
evtStr String e.g. 'click', 'mousedown touchstart', 'mousedown.foo touchstart.foo'
handler function The handler function is passed an event object
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Node
Example
// add click listener<br>
node.on('click', function() {<br>
  console.log('you clicked me!');<br>
});<br><br>

// get the target node<br>
node.on('click', function(evt) {<br>
  console.log(evt.target);<br>
});<br><br>

// stop event propagation<br>
node.on('click', function(evt) {<br>
  evt.cancelBubble = true;<br>
});<br><br>

// bind multiple listeners<br>
node.on('click touchstart', function() {<br>
  console.log('you clicked/touched me!');<br>
});<br><br>

// namespace listener<br>
node.on('click.foo', function() {<br>
  console.log('you clicked/touched me!');<br>
});<br><br>

// get the event type<br>
node.on('click tap', function(evt) {<br>
  var eventType = evt.type;<br>
});<br><br>

// get native event object<br>
node.on('click tap', function(evt) {<br>
  var nativeEvent = evt.evt;<br>
});<br><br>

// for change events, get the old and new val<br>
node.on('xChange', function(evt) {<br>
  var oldVal = evt.oldVal;<br>
  var newVal = evt.newVal;<br>
});

opacity(opacity) → {Number}

get/set opacity. Opacity values range from 0 to 1. A node with an opacity of 0 is fully transparent, and a node with an opacity of 1 is fully opaque
Parameters:
Name Type Description
opacity Object
Inherited From:
Overrides:
Source:
Returns:
Type
Number
Example
// get opacity<br>
var opacity = node.opacity();<br><br>

// set opacity<br>
node.opacity(0.5);

pixelSize(pixelSize) → {Integer}

get/set pixel size
Parameters:
Name Type Description
pixelSize Integer
Inherited From:
Overrides:
Source:
Returns:
Type
Integer

position(pos) → {Object}

get/set node position relative to parent
Parameters:
Name Type Description
pos Object
Properties
Name Type Description
x Number
y Nubmer
Inherited From:
Overrides:
Source:
Returns:
Type
Object
Example
// get position<br>
var position = node.position();<br><br>

// set position<br>
node.position({<br>
  x: 5<br>
  y: 10<br>
});

red(red) → {Integer}

get/set filter red value
Parameters:
Name Type Description
red Integer value between 0 and 255
Inherited From:
Overrides:
Source:
Returns:
Type
Integer

remove() → {Kinetic.Node}

remove self from parent, but don't destroy
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Node
Example
node.remove();

rotate(theta) → {Kinetic.Node}

rotate node by an amount in degrees relative to its current rotation
Parameters:
Name Type Description
theta Number
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Node

rotation(rotation) → {Number}

get/set rotation in degrees
Parameters:
Name Type Description
rotation Number
Inherited From:
Overrides:
Source:
Returns:
Type
Number
Example
// get rotation in degrees<br>
var rotation = node.rotation();<br><br>

// set rotation in degrees<br>
node.rotation(45);

saturation(saturation) → {Number}

get/set hsv saturation
Parameters:
Name Type Description
saturation Number 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..
Inherited From:
Overrides:
Source:
Returns:
Type
Number

scale(scale) → {Object}

get/set scale
Parameters:
Name Type Description
scale Object
Properties
Name Type Description
x Number
y Number
Inherited From:
Overrides:
Source:
Returns:
Type
Object
Example
// get scale<br>
var scale = node.scale();<br><br>

// set scale <br>
shape.scale({<br>
  x: 2<br>
  y: 3<br>
});

scaleX(x) → {Number}

get/set scale x
Parameters:
Name Type Description
x Number
Inherited From:
Overrides:
Source:
Returns:
Type
Number
Example
// get scale x<br>
var scaleX = node.scaleX();<br><br>

// set scale x<br>
node.scaleX(2);

scaleY(y) → {Number}

get/set scale y
Parameters:
Name Type Description
y Number
Inherited From:
Overrides:
Source:
Returns:
Type
Number
Example
// get scale y<br>
var scaleY = node.scaleY();<br><br>

// set scale y<br>
node.scaleY(2);

sceneFunc(drawFunc) → {function}

get/set scene draw function
Parameters:
Name Type Description
drawFunc function drawing function
Source:
Returns:
Type
function
Example
// get scene draw function<br>
var sceneFunc = shape.sceneFunc();<br><br>

// set scene draw function<br>
shape.sceneFunc(function(context) {<br>
  context.beginPath();<br>
  context.rect(0, 0, this.width(), this.height());<br>
  context.closePath();<br>
  context.fillStrokeShape(this);<br>
});

setAbsolutePosition(pos) → {Kinetic.Node}

set absolute position
Parameters:
Name Type Description
pos Object
Properties
Name Type Description
x Number
y Number
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Node

setAttr(attr, val) → {Kinetic.Node}

set attr
Parameters:
Name Type Description
attr String
val *
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Node
Example
node.setAttr('x', 5);

setAttrs(config) → {Kinetic.Node}

set multiple attrs at once using an object literal
Parameters:
Name Type Description
config Object object containing key value pairs
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Node
Example
node.setAttrs({<br>
  x: 5,<br>
  fill: 'red'<br>
});<br>

setId(id) → {Kinetic.Node}

set id
Parameters:
Name Type Description
id String
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Node

setZIndex(zIndex) → {Kinetic.Node}

set zIndex relative to siblings
Parameters:
Name Type Description
zIndex Integer
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Node

shadowAlpha(alpha) → {Number}

get/set shadow alpha component. Alpha is a real number between 0 and 1. The default is 1.
Parameters:
Name Type Description
alpha Number
Source:
Returns:
Type
Number
Example
// get shadow alpha component<br>
var shadowAlpha = shape.shadowAlpha();<br><br>

// set shadow alpha component<br>
shape.shadowAlpha(0.5);

shadowBlue(blue) → {Integer}

get/set shadow blue component
Parameters:
Name Type Description
blue Integer
Source:
Returns:
Type
Integer
Example
// get shadow blue component<br>
var shadowBlue = shape.shadowBlue();<br><br>

// set shadow blue component<br>
shape.shadowBlue(0);

shadowBlur(blur) → {Number}

get/set shadow blur
Parameters:
Name Type Description
blur Number
Source:
Returns:
Type
Number
Example
// get shadow blur<br>
var shadowBlur = shape.shadowBlur();<br><br>

// set shadow blur<br>
shape.shadowBlur(10);

shadowColor(color) → {String}

get/set shadow color
Parameters:
Name Type Description
color String
Source:
Returns:
Type
String
Example
// get shadow color<br>
var shadow = shape.shadowColor();<br><br>

// set shadow color with color string<br>
shape.shadowColor('green');<br><br>

// set shadow color with hex<br>
shape.shadowColor('#00ff00');<br><br>

// set shadow color with rgb<br>
shape.shadowColor('rgb(0,255,0)');<br><br>

// set shadow color with rgba and make it 50% opaque<br>
shape.shadowColor('rgba(0,255,0,0.5');

shadowEnabled(enabled) → {Boolean}

get/set shadow enabled flag
Parameters:
Name Type Description
enabled Boolean
Source:
Returns:
Type
Boolean
Example
// get shadow enabled flag<br>
var shadowEnabled = shape.shadowEnabled();<br><br>

// disable shadow<br>
shape.shadowEnabled(false);<br><br>

// enable shadow<br>
shape.shadowEnabled(true);

shadowGreen(green) → {Integer}

get/set shadow green component
Parameters:
Name Type Description
green Integer
Source:
Returns:
Type
Integer
Example
// get shadow green component<br>
var shadowGreen = shape.shadowGreen();<br><br>

// set shadow green component<br>
shape.shadowGreen(255);

shadowOffset(offset) → {Object}

get/set shadow offset
Parameters:
Name Type Description
offset Object
Properties
Name Type Description
x Number
y Number
Source:
Returns:
Type
Object
Example
// get shadow offset<br>
var shadowOffset = shape.shadowOffset();<br><br>

// set shadow offset<br>
shape.shadowOffset({<br>
  x: 20<br>
  y: 10<br>
});

shadowOffsetX(x) → {Number}

get/set shadow offset x
Parameters:
Name Type Description
x Number
Source:
Returns:
Type
Number
Example
// get shadow offset x<br>
var shadowOffsetX = shape.shadowOffsetX();<br><br>

// set shadow offset x<br>
shape.shadowOffsetX(5);

shadowOffsetY(y) → {Number}

get/set shadow offset y
Parameters:
Name Type Description
y Number
Source:
Returns:
Type
Number
Example
// get shadow offset y<br>
var shadowOffsetY = shape.shadowOffsetY();<br><br>

// set shadow offset y<br>
shape.shadowOffsetY(5);

shadowOpacity(opacity) → {Number}

get/set shadow opacity. must be a value between 0 and 1
Parameters:
Name Type Description
opacity Number
Source:
Returns:
Type
Number
Example
// get shadow opacity<br>
var shadowOpacity = shape.shadowOpacity();<br><br>

// set shadow opacity<br>
shape.shadowOpacity(0.5);

shadowRed(red) → {Integer}

get/set shadow red component
Parameters:
Name Type Description
red Integer
Source:
Returns:
Type
Integer
Example
// get shadow red component<br>
var shadowRed = shape.shadowRed();<br><br>

// set shadow red component<br>
shape.shadowRed(0);

shouldDrawHit() → {Boolean}

determine if listening is enabled by taking into account descendants. If self or any children have _isListeningEnabled set to true, then self also has listening enabled.
Inherited From:
Overrides:
Source:
Returns:
Type
Boolean

show() → {Kinetic.Node}

show node
Inherited From:
Overrides:
Source:
Returns:
Type
Kinetic.Node

size(size) → {Object}

get/set node size
Parameters:
Name Type Description
size Object
Properties
Name Type Description
width Number
height Number
Inherited From:
Overrides:
Source:
Returns:
Type
Object
Example
// get node size<br>
var size = node.size();<br>
var x = size.x;<br>
var y = size.y;<br><br>

// set size<br>
node.size({<br>
  width: 100,<br>
  height: 200<br>
});

skew(skew) → {Object}

get/set skew
Parameters:
Name Type Description
skew Object
Properties
Name Type Description
x Number
y Number
Inherited From:
Overrides:
Source:
Returns:
Type
Object
Example
// get skew<br>
var skew = node.skew();<br><br>

// set skew <br>
node.skew({<br>
  x: 20<br>
  y: 10
});

skewX(x) → {Number}

get/set skew x
Parameters:
Name Type Description
x Number
Inherited From:
Overrides:
Source:
Returns:
Type
Number
Example
// get skew x<br>
var skewX = node.skewX();<br><br>

// set skew x<br>
node.skewX(3);

skewY(y) → {Number}

get/set skew y
Parameters:
Name Type Description
y Number
Inherited From:
Overrides:
Source:
Returns:
Type
Number
Example
// get skew y<br>
var skewY = node.skewY();<br><br>

// set skew y<br>
node.skewY(3);

stroke(color) → {String}

get/set stroke color
Parameters:
Name Type Description
color String
Source:
Returns:
Type
String
Example
// get stroke color<br>
var stroke = shape.stroke();<br><br>

// set stroke color with color string<br>
shape.stroke('green');<br><br>

// set stroke color with hex<br>
shape.stroke('#00ff00');<br><br>

// set stroke color with rgb<br>
shape.stroke('rgb(0,255,0)');<br><br>

// set stroke color with rgba and make it 50% opaque<br>
shape.stroke('rgba(0,255,0,0.5');

strokeAlpha(alpha) → {Number}

get/set stroke alpha component. Alpha is a real number between 0 and 1. The default is 1.
Parameters:
Name Type Description
alpha Number
Source:
Returns:
Type
Number
Example
// get stroke alpha component<br>
var strokeAlpha = shape.strokeAlpha();<br><br>

// set stroke alpha component<br>
shape.strokeAlpha(0.5);

strokeBlue(blue) → {Integer}

get/set stroke blue component
Parameters:
Name Type Description
blue Integer
Source:
Returns:
Type
Integer
Example
// get stroke blue component<br>
var strokeBlue = shape.strokeBlue();<br><br>

// set stroke blue component<br>
shape.strokeBlue(0);

strokeEnabled(enabled) → {Boolean}

get/set stroke enabled flag
Parameters:
Name Type Description
enabled Boolean
Source:
Returns:
Type
Boolean
Example
// get stroke enabled flag<br>
var strokeEnabled = shape.strokeEnabled();<br><br>

// disable stroke<br>
shape.strokeEnabled(false);<br><br>

// enable stroke<br>
shape.strokeEnabled(true);

strokeGreen(green) → {Integer}

get/set stroke green component
Parameters:
Name Type Description
green Integer
Source:
Returns:
Type
Integer
Example
// get stroke green component<br>
var strokeGreen = shape.strokeGreen();<br><br>

// set stroke green component<br>
shape.strokeGreen(255);

strokeRed(red) → {Integer}

get/set stroke red component
Parameters:
Name Type Description
red Integer
Source:
Returns:
Type
Integer
Example
// get stroke red component<br>
var strokeRed = shape.strokeRed();<br><br>

// set stroke red component<br>
shape.strokeRed(0);

strokeScaleEnabled(enabled) → {Boolean}

get/set strokeScale enabled flag
Parameters:
Name Type Description
enabled Boolean
Source:
Returns:
Type
Boolean
Example
// get stroke scale enabled flag<br>
var strokeScaleEnabled = shape.strokeScaleEnabled();<br><br>

// disable stroke scale<br>
shape.strokeScaleEnabled(false);<br><br>

// enable stroke scale<br>
shape.strokeScaleEnabled(true);

strokeWidth(strokeWidth) → {Number}

get/set stroke width
Parameters:
Name Type Description
strokeWidth Number
Source:
Returns:
Type
Number
Example
// get stroke width<br>
var strokeWidth = shape.strokeWidth();<br><br>

// set stroke width<br>
shape.strokeWidth();

threshold(threshold) → {Number}

get/set threshold. Must be a value between 0 and 1
Parameters:
Name Type Description
threshold Number
Inherited From:
Overrides:
Source:
Returns:
Type
Number

toDataURL(config) → {String}

Creates a composite data URL. If MIME type is not specified, then "image/png" will result. For "image/jpeg", specify a quality level as quality (range 0.0 - 1.0)
Parameters:
Name Type Description
config Object
Properties
Name Type Attributes Description
mimeType String <optional>
can be "image/png" or "image/jpeg". "image/png" is the default
x Number <optional>
x position of canvas section
y Number <optional>
y position of canvas section
width Number <optional>
width of canvas section
height Number <optional>
height of canvas section
quality Number <optional>
jpeg quality. If using an "image/jpeg" mimeType, you can specify the quality from 0 to 1, where 0 is very poor quality and 1 is very high quality
Inherited From:
Overrides:
Source:
Returns:
Type
String

toImage(config)

converts node into an image. Since the toImage method is asynchronous, a callback is required. toImage is most commonly used to cache complex drawings as an image so that they don't have to constantly be redrawn
Parameters:
Name Type Description
config Object
Properties
Name Type Attributes Description
callback function function executed when the composite has completed
mimeType String <optional>
can be "image/png" or "image/jpeg". "image/png" is the default
x Number <optional>
x position of canvas section
y Number <optional>
y position of canvas section
width Number <optional>
width of canvas section
height Number <optional>
height of canvas section
quality Number <optional>
jpeg quality. If using an "image/jpeg" mimeType, you can specify the quality from 0 to 1, where 0 is very poor quality and 1 is very high quality
Inherited From:
Overrides:
Source:
Example
var image = node.toImage({<br>
  callback: function(img) {<br>
    // do stuff with img<br>
  }<br>
});

toJSON() → {String}

convert Node into a JSON string. Returns a JSON string.
Inherited From:
Overrides:
Source:
Returns:
}
Type
String

toObject() → {Object}

convert Node into an object for serialization. Returns an object.
Inherited From:
Overrides:
Source:
Returns:
Type
Object

transformsEnabled(enabled) → {String}

get/set transforms that are enabled. Can be "all", "none", or "position". The default is "all"
Parameters:
Name Type Description
enabled String
Inherited From:
Overrides:
Source:
Returns:
Type
String
Example
// enable position transform only to improve draw performance<br>
node.transformsEnabled('position');<br><br>

// enable all transforms<br>
node.transformsEnabled('all');

value(value) → {Number}

get/set hsl luminance
Parameters:
Name Type Description
value Number 0 is no change, -1.0 halves the value, 1.0 doubles, etc..
Inherited From:
Overrides:
Source:
Returns:
Type
Number

visible(visible) → {Boolean|String}

get/set visible attr. Can be "inherit", true, or false. The default is "inherit". If you need to determine if a node is visible or not by taking into account its parents, use the isVisible() method
Parameters:
Name Type Description
visible Boolean | String
Inherited From:
Overrides:
Source:
Returns:
Type
Boolean | String
Example
// get visible attr<br>
var visible = node.visible();<br><br>

// make invisible<br>
node.visible(false);<br><br>

// make visible<br>
node.visible(true);<br><br>

// make visible according to the parent<br>
node.visible('inherit');

width(width) → {Number}

get/set width
Parameters:
Name Type Description
width Number
Inherited From:
Overrides:
Source:
Returns:
Type
Number
Example
// get width<br>
var width = node.width();<br><br>

// set width<br>
node.width(100);

x(x) → {Object}

get/set x position
Parameters:
Name Type Description
x Number
Inherited From:
Overrides:
Source:
Returns:
Type
Object
Example
// get x<br>
var x = node.x();<br><br>

// set x<br>
node.x(5);

y(y) → {Integer}

get/set y position
Parameters:
Name Type Description
y Number
Inherited From:
Overrides:
Source:
Returns:
Type
Integer
Example
// get y<br>
var y = node.y();<br><br>

// set y<br>
node.y(5);