Skip to main content

Shape

new Konva.Shape(config)

Shape constructor. Shapes are primitive objects such as rectangles, circles, text, lines, etc.

Parameters​

NameTypeDescription
configObject
fill (optional)Stringfill color
fillPatternImage (optional)Imagefill pattern image
fillPatternX (optional)Number
fillPatternY (optional)Number
fillPatternOffset (optional)Objectobject with x and y component
fillPatternOffsetX (optional)Number
fillPatternOffsetY (optional)Number
fillPatternScale (optional)Objectobject with x and y component
fillPatternScaleX (optional)Number
fillPatternScaleY (optional)Number
fillPatternRotation (optional)Number
fillPatternRepeat (optional)Stringcan be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat"
fillLinearGradientStartPoint (optional)Objectobject with x and y component
fillLinearGradientStartPointX (optional)Number
fillLinearGradientStartPointY (optional)Number
fillLinearGradientEndPoint (optional)Objectobject with x and y component
fillLinearGradientEndPointX (optional)Number
fillLinearGradientEndPointY (optional)Number
fillLinearGradientColorStops (optional)Arrayarray of color stops
fillRadialGradientStartPoint (optional)Objectobject with x and y component
fillRadialGradientStartPointX (optional)Number
fillRadialGradientStartPointY (optional)Number
fillRadialGradientEndPoint (optional)Objectobject with x and y component
fillRadialGradientEndPointX (optional)Number
fillRadialGradientEndPointY (optional)Number
fillRadialGradientStartRadius (optional)Number
fillRadialGradientEndRadius (optional)Number
fillRadialGradientColorStops (optional)Arrayarray of color stops
fillEnabled (optional)Booleanflag which enables or disables the fill. The default value is true
fillPriority (optional)Stringcan 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 (optional)Stringstroke color
strokeWidth (optional)Numberstroke width
fillAfterStrokeEnabled (optional)BooleanShould we draw fill AFTER stroke? Default is false.
hitStrokeWidth (optional)Numbersize of the stroke on hit canvas. The default is "auto" - equals to strokeWidth
strokeHitEnabled (optional)Booleanflag which enables or disables stroke hit region. The default is true
perfectDrawEnabled (optional)Booleanflag which enables or disables using buffer canvas. The default is true
shadowForStrokeEnabled (optional)Booleanflag which enables or disables shadow for stroke. The default is true
strokeScaleEnabled (optional)Booleanflag which enables or disables stroke scale. The default is true
strokeEnabled (optional)Booleanflag which enables or disables the stroke. The default value is true
lineJoin (optional)Stringcan be miter, round, or bevel. The default is miter
lineCap (optional)Stringcan be butt, round, or square. The default is butt
shadowColor (optional)String
shadowBlur (optional)Number
shadowOffset (optional)Objectobject with x and y component
shadowOffsetX (optional)Number
shadowOffsetY (optional)Number
shadowOpacity (optional)Numbershadow opacity. Can be any real number between 0 and 1
shadowEnabled (optional)Booleanflag which enables or disables the shadow. The default value is true
dash (optional)Array
dashEnabled (optional)Booleanflag which enables or disables the dashArray. The default value is true
x (optional)Number
y (optional)Number
width (optional)Number
height (optional)Number
visible (optional)Boolean
listening (optional)Booleanwhether or not the node is listening for events
id (optional)Stringunique id
name (optional)Stringnon-unique name
opacity (optional)Numberdetermines node opacity. Can be any number between 0 and 1
scale (optional)Objectset scale
scaleX (optional)Numberset scale x
scaleY (optional)Numberset scale y
rotation (optional)Numberrotation in degrees
offset (optional)Objectoffset from center point and rotation point
offsetX (optional)Numberset offset x
offsetY (optional)Numberset offset y
draggable (optional)Booleanmakes the node draggable. When stages are draggable, you can drag and drop the entire stage by dragging any portion of the stage
dragDistance (optional)Number
dragBoundFunc (optional)function

Inherited from: Konva.Node

Own Methods​

getContext()​

getCanvas()​

hasShadow()​

returns whether or not a shadow will be rendered

Returns: Boolean

hasFill()​

returns whether or not the shape will be filled

Returns: Boolean

hasStroke()​

returns whether or not the shape will be stroked

Returns: Boolean

intersects(point)​

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 Konva.Stage#getIntersection method if at all possible because it performs much better

Parameters:

  • point (Object)
  • point.x (Number)
  • point.y (Number)

Returns: Boolean

getSelfRect()​

return self rectangle (x, y, width, height) of shape. This method are not taken into account transformation and styles.

Returns: Object rect with {x, y, width, height} properties

Example:

rect.getSelfRect();  // return {x:0, y:0, width:rect.width(), height:rect.height()}
circle.getSelfRect();  // return {x: - circle.width() / 2, y: - circle.height() / 2, width:circle.width(), height:circle.height()}

drawHitFromCache(alphaThreshold)​

draw hit graph using the cached scene canvas

Parameters:

  • 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

Returns: Konva.Shape

Example:

shape.cache();
shape.drawHitFromCache();

stroke(color)​

get/set stroke color

Parameters:

  • color (String)

Returns: String

Example:

// get stroke color
var stroke = shape.stroke();

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

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

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

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

strokeWidth(strokeWidth)​

get/set stroke width

Parameters:

  • strokeWidth (Number)

Returns: Number

Example:

// get stroke width
var strokeWidth = shape.strokeWidth();

// set stroke width
shape.strokeWidth(10);

fillAfterStrokeEnabled(fillAfterStrokeEnabled)​

get/set fillAfterStrokeEnabled property. By default Konva is drawing filling first, then stroke on top of the fill. In rare situations you may want a different behavior. When you have a stroke first then fill on top of it. Especially useful for Text objects. Default is false.

Parameters:

  • fillAfterStrokeEnabled (Boolean)

Returns: Boolean

Example:

// get stroke width
var fillAfterStrokeEnabled = shape.fillAfterStrokeEnabled();

// set stroke width
shape.fillAfterStrokeEnabled(true);

hitStrokeWidth(hitStrokeWidth)​

get/set stroke width for hit detection. Default value is "auto", it means it will be equals to strokeWidth

Parameters:

  • hitStrokeWidth (Number)

Returns: Number

Example:

// get stroke width
var hitStrokeWidth = shape.hitStrokeWidth();

// set hit stroke width
shape.hitStrokeWidth(20);
// set hit stroke width always equals to scene stroke width
shape.hitStrokeWidth('auto');

strokeHitEnabled(strokeHitEnabled)​

deprecated, use hitStrokeWidth instead! get/set strokeHitEnabled property. Useful for performance optimization. You may set shape.strokeHitEnabled(false). In this case stroke will be no draw on hit canvas, so hit area of shape will be decreased (by lineWidth / 2). Remember that non closed line with strokeHitEnabled = false will be not drawn on hit canvas, that is mean line will no trigger pointer events (like mouseover) Default value is true.

Parameters:

  • strokeHitEnabled (Boolean)

Returns: Boolean

Example:

// get strokeHitEnabled
var strokeHitEnabled = shape.strokeHitEnabled();

// set strokeHitEnabled
shape.strokeHitEnabled();

perfectDrawEnabled(perfectDrawEnabled)​

get/set perfectDrawEnabled. If a shape has fill, stroke and opacity you may set perfectDrawEnabled to false to improve performance. See http://konvajs.org/docs/performance/Disable_Perfect_Draw.html for more information. Default value is true

Parameters:

  • perfectDrawEnabled (Boolean)

Returns: Boolean

Example:

// get perfectDrawEnabled
var perfectDrawEnabled = shape.perfectDrawEnabled();

// set perfectDrawEnabled
shape.perfectDrawEnabled();

shadowForStrokeEnabled(shadowForStrokeEnabled)​

get/set shadowForStrokeEnabled. Useful for performance optimization. You may set shape.shadowForStrokeEnabled(false). In this case stroke will no effect shadow. Remember if you set shadowForStrokeEnabled = false for non closed line - that line will have no shadow!. Default value is true

Parameters:

  • shadowForStrokeEnabled (Boolean)

Returns: Boolean

Example:

// get shadowForStrokeEnabled
var shadowForStrokeEnabled = shape.shadowForStrokeEnabled();

// set shadowForStrokeEnabled
shape.shadowForStrokeEnabled();

lineJoin(lineJoin)​

get/set line join. Can be miter, round, or bevel. The default is miter

Parameters:

  • lineJoin (String)

Returns: String

Example:

// get line join
var lineJoin = shape.lineJoin();

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

lineCap(lineCap)​

get/set line cap. Can be butt, round, or square

Parameters:

  • lineCap (String)

Returns: String

Example:

// get line cap
var lineCap = shape.lineCap();

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

miterLimit(miterLimit)​

get/set miterLimit.

Parameters:

  • miterLimit (Number)

Returns: Number

Example:

// get miter limit
var miterLimit = shape.miterLimit();

// set miter limit
shape.miterLimit(10);

sceneFunc(drawFunc)​

get/set scene draw function. That function is used to draw the shape on a canvas. Also that function will be used to draw hit area of the shape, in case if hitFunc is not defined.

Parameters:

  • drawFunc (function): drawing function

Returns: function

Example:

// get scene draw function
var sceneFunc = shape.sceneFunc();

// set scene draw function
shape.sceneFunc(function(context, shape) {
  context.beginPath();
  context.rect(0, 0, shape.width(), shape.height());
  context.closePath();
  // important Konva method that fill and stroke shape from its properties
  // like stroke and fill
  context.fillStrokeShape(shape);
});

hitFunc(drawFunc)​

get/set hit draw function. That function is used to draw custom hit area of a shape.

Parameters:

  • drawFunc (function): drawing function

Returns: function

Example:

// get hit draw function
var hitFunc = shape.hitFunc();

// set hit draw function
shape.hitFunc(function(context) {
  context.beginPath();
  context.rect(0, 0, shape.width(), shape.height());
  context.closePath();
  // important Konva method that fill and stroke shape from its properties
  context.fillStrokeShape(shape);
});

dash(dash)​

get/set dash array for stroke.

Parameters:

  • dash (Array)

Returns: Array

Example:

// apply dashed stroke that is 10px long and 5 pixels apart
 line.dash([10, 5]);
 // apply dashed stroke that is made up of alternating dashed
 // lines that are 10px long and 20px apart, and dots that have
 // a radius of 5px and are 20px apart
 line.dash([10, 20, 0.001, 20]);

dash(dash)​

get/set dash offset for stroke.

Parameters:

  • dash (Number): offset

Returns: Number

Example:

// apply dashed stroke that is 10px long and 5 pixels apart with an offset of 5px
 line.dash([10, 5]);
 line.dashOffset(5);

shadowColor(color)​

get/set shadow color

Parameters:

  • color (String)

Returns: String

Example:

// get shadow color
var shadow = shape.shadowColor();

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

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

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

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

shadowBlur(blur)​

get/set shadow blur

Parameters:

  • blur (Number)

Returns: Number

Example:

// get shadow blur
var shadowBlur = shape.shadowBlur();

// set shadow blur
shape.shadowBlur(10);

shadowOpacity(opacity)​

get/set shadow opacity. must be a value between 0 and 1

Parameters:

  • opacity (Number)

Returns: Number

Example:

// get shadow opacity
var shadowOpacity = shape.shadowOpacity();

// set shadow opacity
shape.shadowOpacity(0.5);

shadowOffset(offset)​

get/set shadow offset

Parameters:

  • offset (Object)
  • offset.x (Number)
  • offset.y (Number)

Returns: Object

Example:

// get shadow offset
var shadowOffset = shape.shadowOffset();

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

shadowOffsetX(x)​

get/set shadow offset x

Parameters:

  • x (Number)

Returns: Number

Example:

// get shadow offset x
var shadowOffsetX = shape.shadowOffsetX();

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

shadowOffsetY(y)​

get/set shadow offset y

Parameters:

  • y (Number)

Returns: Number

Example:

// get shadow offset y
var shadowOffsetY = shape.shadowOffsetY();

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

fillPatternImage(image)​

get/set fill pattern image

Parameters:

  • image (Image): object

Returns: Image

Example:

// get fill pattern image
var fillPatternImage = shape.fillPatternImage();

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

fill(color)​

get/set fill color

Parameters:

  • color (String)

Returns: String

Example:

// get fill color
var fill = shape.fill();

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

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

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

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

// shape without fill
shape.fill(null);

fillPatternX(x)​

get/set fill pattern x

Parameters:

  • x (Number)

Returns: Number

Example:

// get fill pattern x
var fillPatternX = shape.fillPatternX();
// set fill pattern x
shape.fillPatternX(20);

fillPatternY(y)​

get/set fill pattern y

Parameters:

  • y (Number)

Returns: Number

Example:

// get fill pattern y
var fillPatternY = shape.fillPatternY();
// set fill pattern y
shape.fillPatternY(20);

fillLinearGradientColorStops(colorStops)​

get/set fill linear gradient color stops

Parameters:

  • colorStops (Array)

Returns: Array colorStops

Example:

// get fill linear gradient color stops
var colorStops = shape.fillLinearGradientColorStops();

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

strokeLinearGradientColorStops(colorStops)​

get/set stroke linear gradient color stops

Parameters:

  • colorStops (Array)

Returns: Array colorStops

Example:

// get stroke linear gradient color stops
var colorStops = shape.strokeLinearGradientColorStops();

// create a linear gradient that starts with red, changes to blue
// halfway through, and then changes to green
shape.strokeLinearGradientColorStops([0, 'red', 0.5, 'blue', 1, 'green']);

fillRadialGradientStartRadius(radius)​

get/set fill radial gradient start radius

Parameters:

  • radius (Number)

Returns: Number

Example:

// get radial gradient start radius
var startRadius = shape.fillRadialGradientStartRadius();

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

fillRadialGradientEndRadius(radius)​

get/set fill radial gradient end radius

Parameters:

  • radius (Number)

Returns: Number

Example:

// get radial gradient end radius
var endRadius = shape.fillRadialGradientEndRadius();

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

fillRadialGradientColorStops(colorStops)​

get/set fill radial gradient color stops

Parameters:

  • colorStops (Number)

Returns: Array

Example:

// get fill radial gradient color stops
var colorStops = shape.fillRadialGradientColorStops();

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

fillPatternRepeat(repeat)​

get/set fill pattern repeat. Can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'repeat'

Parameters:

  • repeat (String)

Returns: String

Example:

// get fill pattern repeat
var repeat = shape.fillPatternRepeat();

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

// do not repeat the pattern
shape.fillPatternRepeat('no-repeat');

fillEnabled(enabled)​

get/set fill enabled flag

Parameters:

  • enabled (Boolean)

Returns: Boolean

Example:

// get fill enabled flag
var fillEnabled = shape.fillEnabled();

// disable fill
shape.fillEnabled(false);

// enable fill
shape.fillEnabled(true);

strokeEnabled(enabled)​

get/set stroke enabled flag

Parameters:

  • enabled (Boolean)

Returns: Boolean

Example:

// get stroke enabled flag
var strokeEnabled = shape.strokeEnabled();

// disable stroke
shape.strokeEnabled(false);

// enable stroke
shape.strokeEnabled(true);

shadowEnabled(enabled)​

get/set shadow enabled flag

Parameters:

  • enabled (Boolean)

Returns: Boolean

Example:

// get shadow enabled flag
var shadowEnabled = shape.shadowEnabled();

// disable shadow
shape.shadowEnabled(false);

// enable shadow
shape.shadowEnabled(true);

dashEnabled(enabled)​

get/set dash enabled flag

Parameters:

  • enabled (Boolean)

Returns: Boolean

Example:

// get dash enabled flag
var dashEnabled = shape.dashEnabled();

// disable dash
shape.dashEnabled(false);

// enable dash
shape.dashEnabled(true);

strokeScaleEnabled(enabled)​

get/set strokeScale enabled flag

Parameters:

  • enabled (Boolean)

Returns: Boolean

Example:

// get stroke scale enabled flag
var strokeScaleEnabled = shape.strokeScaleEnabled();

// disable stroke scale
shape.strokeScaleEnabled(false);

// enable stroke scale
shape.strokeScaleEnabled(true);

fillPriority(priority)​

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:

  • priority (String)

Returns: String

Example:

// get fill priority
var fillPriority = shape.fillPriority();

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

fillPatternOffset(offset)​

get/set fill pattern offset

Parameters:

  • offset (Object)
  • offset.x (Number)
  • offset.y (Number)

Returns: Object

Example:

// get fill pattern offset
var patternOffset = shape.fillPatternOffset();

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

fillPatternOffsetX(x)​

get/set fill pattern offset x

Parameters:

  • x (Number)

Returns: Number

Example:

// get fill pattern offset x
var patternOffsetX = shape.fillPatternOffsetX();

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

fillPatternOffsetY(y)​

get/set fill pattern offset y

Parameters:

  • y (Number)

Returns: Number

Example:

// get fill pattern offset y
var patternOffsetY = shape.fillPatternOffsetY();

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

fillPatternScale(scale)​

get/set fill pattern scale

Parameters:

  • scale (Object)
  • scale.x (Number)
  • scale.y (Number)

Returns: Object

Example:

// get fill pattern scale
var patternScale = shape.fillPatternScale();

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

fillPatternScaleX(x)​

get/set fill pattern scale x

Parameters:

  • x (Number)

Returns: Number

Example:

// get fill pattern scale x
var patternScaleX = shape.fillPatternScaleX();

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

fillPatternScaleY(y)​

get/set fill pattern scale y

Parameters:

  • y (Number)

Returns: Number

Example:

// get fill pattern scale y
var patternScaleY = shape.fillPatternScaleY();

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

fillLinearGradientStartPoint(startPoint)​

get/set fill linear gradient start point

Parameters:

  • startPoint (Object)
  • startPoint.x (Number)
  • startPoint.y (Number)

Returns: Object

Example:

// get fill linear gradient start point
var startPoint = shape.fillLinearGradientStartPoint();

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

strokeLinearGradientStartPoint(startPoint)​

get/set stroke linear gradient start point

Parameters:

  • startPoint (Object)
  • startPoint.x (Number)
  • startPoint.y (Number)

Returns: Object

Example:

// get stroke linear gradient start point
var startPoint = shape.strokeLinearGradientStartPoint();

// set stroke linear gradient start point
shape.strokeLinearGradientStartPoint({
  x: 20,
  y: 10
});

fillLinearGradientStartPointX(x)​

get/set fill linear gradient start point x

Parameters:

  • x (Number)

Returns: Number

Example:

// get fill linear gradient start point x
var startPointX = shape.fillLinearGradientStartPointX();

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

linearLinearGradientStartPointX(x)​

get/set stroke linear gradient start point x

Parameters:

  • x (Number)

Returns: Number

Example:

// get stroke linear gradient start point x
var startPointX = shape.strokeLinearGradientStartPointX();

// set stroke linear gradient start point x
shape.strokeLinearGradientStartPointX(20);

fillLinearGradientStartPointY(y)​

get/set fill linear gradient start point y

Parameters:

  • y (Number)

Returns: Number

Example:

// get fill linear gradient start point y
var startPointY = shape.fillLinearGradientStartPointY();

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

strokeLinearGradientStartPointY(y)​

get/set stroke linear gradient start point y

Parameters:

  • y (Number)

Returns: Number

Example:

// get stroke linear gradient start point y
var startPointY = shape.strokeLinearGradientStartPointY();

// set stroke linear gradient start point y
shape.strokeLinearGradientStartPointY(20);

fillLinearGradientEndPoint(endPoint)​

get/set fill linear gradient end point

Parameters:

  • endPoint (Object)
  • endPoint.x (Number)
  • endPoint.y (Number)

Returns: Object

Example:

// get fill linear gradient end point
var endPoint = shape.fillLinearGradientEndPoint();

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

strokeLinearGradientEndPoint(endPoint)​

get/set stroke linear gradient end point

Parameters:

  • endPoint (Object)
  • endPoint.x (Number)
  • endPoint.y (Number)

Returns: Object

Example:

// get stroke linear gradient end point
var endPoint = shape.strokeLinearGradientEndPoint();

// set stroke linear gradient end point
shape.strokeLinearGradientEndPoint({
  x: 20,
  y: 10
});

fillLinearGradientEndPointX(x)​

get/set fill linear gradient end point x

Parameters:

  • x (Number)

Returns: Number

Example:

// get fill linear gradient end point x
var endPointX = shape.fillLinearGradientEndPointX();

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

strokeLinearGradientEndPointX(x)​

get/set fill linear gradient end point x

Parameters:

  • x (Number)

Returns: Number

Example:

// get stroke linear gradient end point x
var endPointX = shape.strokeLinearGradientEndPointX();

// set stroke linear gradient end point x
shape.strokeLinearGradientEndPointX(20);

fillLinearGradientEndPointY(y)​

get/set fill linear gradient end point y

Parameters:

  • y (Number)

Returns: Number

Example:

// get fill linear gradient end point y
var endPointY = shape.fillLinearGradientEndPointY();

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

strokeLinearGradientEndPointY(y)​

get/set stroke linear gradient end point y

Parameters:

  • y (Number)

Returns: Number

Example:

// get stroke linear gradient end point y
var endPointY = shape.strokeLinearGradientEndPointY();

// set stroke linear gradient end point y
shape.strokeLinearGradientEndPointY(20);

fillRadialGradientStartPoint(startPoint)​

get/set fill radial gradient start point

Parameters:

  • startPoint (Object)
  • startPoint.x (Number)
  • startPoint.y (Number)

Returns: Object

Example:

// get fill radial gradient start point
var startPoint = shape.fillRadialGradientStartPoint();

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

fillRadialGradientStartPointX(x)​

get/set fill radial gradient start point x

Parameters:

  • x (Number)

Returns: Number

Example:

// get fill radial gradient start point x
var startPointX = shape.fillRadialGradientStartPointX();

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

fillRadialGradientStartPointY(y)​

get/set fill radial gradient start point y

Parameters:

  • y (Number)

Returns: Number

Example:

// get fill radial gradient start point y
var startPointY = shape.fillRadialGradientStartPointY();

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

fillRadialGradientEndPoint(endPoint)​

get/set fill radial gradient end point

Parameters:

  • endPoint (Object)
  • endPoint.x (Number)
  • endPoint.y (Number)

Returns: Object

Example:

// get fill radial gradient end point
var endPoint = shape.fillRadialGradientEndPoint();

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

fillRadialGradientEndPointX(x)​

get/set fill radial gradient end point x

Parameters:

  • x (Number)

Returns: Number

Example:

// get fill radial gradient end point x
var endPointX = shape.fillRadialGradientEndPointX();

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

fillRadialGradientEndPointY(y)​

get/set fill radial gradient end point y

Parameters:

  • y (Number)

Returns: Number

Example:

// get fill radial gradient end point y
var endPointY = shape.fillRadialGradientEndPointY();

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

fillPatternRotation(rotation)​

get/set fill pattern rotation in degrees

Parameters:

  • rotation (Number)

Returns: Konva.Shape

Example:

// get fill pattern rotation
var patternRotation = shape.fillPatternRotation();

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

fillRule(rotation)​

get/set fill rule

Parameters:

  • rotation (CanvasFillRule)

Returns: Konva.Shape

Example:

// get fill rule
var fillRule = shape.fillRule();

// set fill rule
shape.fillRule('evenodd');

Inherited Methods​

Konva.Shape also has all methods of its parent classes. Each link below opens the full documentation of the method on the class that defines it.

From Konva.Node​