Skip to main content

Ellipse

new Konva.Ellipse(config)

Ellipse constructor

Parameters​

NameTypeDescription
configObject
radiusObjectdefines x and y radius
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.Shape

Own Methods​

radius(radius)​

get/set radius

Parameters:

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

Returns: Object

Example:

// get radius
var radius = ellipse.radius();

// set radius
ellipse.radius({
  x: 200,
  y: 100
});

radiusX(x)​

get/set radius x

Parameters:

  • x (Number)

Returns: Number

Example:

// get radius x
var radiusX = ellipse.radiusX();

// set radius x
ellipse.radiusX(200);

radiusY(y)​

get/set radius y

Parameters:

  • y (Number)

Returns: Number

Example:

// get radius y
var radiusY = ellipse.radiusY();

// set radius y
ellipse.radiusY(200);

Inherited Methods​

Konva.Ellipse 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.Shape​

From Konva.Node​