Konva.js

https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt
Admin
Konva.js is a popular 2D HTML5 Canvas JavaScript framework providing an object-oriented API with...
Tokens:39,177
Snippets:143
Trust Score:9.3
Update:6 months ago
Show doc for...
Tokens:
Raw
### Konva.Stage Example

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Example of how to create a new Konva.Stage.

```APIDOC
### Example

```javascript
var stage = new Konva.Stage({
  width: 500,
  height: 800,
  container: 'containerId' // or "#containerId" or ".containerClass"
});
```
```

--------------------------------

### Konva Text Initialization Example

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Example of how to create and configure a Konva.Text object.

```APIDOC
## Konva Text Initialization Example

### Description
An example demonstrating the creation and basic configuration of a Konva.Text object.

### Request Example
```javascript
var text = new Konva.Text({
  x: 10,
  y: 15,
  text: 'Simple Text',
  fontSize: 30,
  fontFamily: 'Calibri',
  fill: 'green'
});
```
```

--------------------------------

### Konva.Image Usage Example

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Example of how to create and use a Konva.Image.

```APIDOC
## Konva.Image Usage Example

### Description
This example demonstrates how to load an image from a URL and create a Konva.Image object.

### Method
None (Illustrative Example)

### Endpoint
None (Illustrative Example)

### Parameters
None

### Request Example
```javascript
var imageObj = new Image();
imageObj.onload = function() {
  var image = new Konva.Image({
    x: 200,
    y: 50,
    image: imageObj,
    width: 100,
    height: 100
  });
};
imageObj.src = '/path/to/image.jpg'
```

### Response
None (Illustrative Example)
```

--------------------------------

### Konva.Layer Constructor and Usage

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Details the Konva.Layer constructor, its configuration options, and provides an example of its usage.

```APIDOC
## Konva.Layer

Layer constructor. Layers are tied to their own canvas element and are used to contain groups or shapes.

### Constructor Config

- **clearBeforeDraw** (Boolean) - Optional - Set this property to false if you don't want to clear the canvas before each layer draw. 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 - * @param {Object} [config.clip] set clip
- **clipX** (Number) - Optional - Set clip x
- **clipY** (Number) - Optional - Set clip y
- **clipWidth** (Number) - Optional - Set clip width
- **clipHeight** (Number) - Optional - Set clip height
- **clipFunc** (function) - Optional - Set clip func

### Properties (getter/setter)

- **getCanvas**: any - Get layer canvas wrapper
- **getNativeCanvasElement**: any - Get native canvas element
- **getHitCanvas**: any - Get layer hit canvas
- **getContext**: any - Get layer canvas context
- **width**: Number - Get/set width of layer. Getter returns width of stage. Setter does nothing. If you want to change width use `stage.width(value);`
- **height**: Number - Get/set height of layer. Getter returns height of stage. Setter does nothing. If you want to change height use `stage.height(value);`
- **getIntersection**: Konva.Node - Get visible intersection shape. This is the preferred method for determining if a point intersects a shape or not. Also, you may pass an optional selector parameter to return an ancestor of intersected shape nodes with listening set to false will not be detected.
- **imageSmoothingEnabled**: Boolean - Get/set imageSmoothingEnabled flag. For more info see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
- **clearBeforeDraw**: Boolean - Get/set clearBeforeDraw flag which determines if the layer is cleared or not before drawing
- **hitGraphEnabled**: Boolean - Get/set hitGraphEnabled flag. **DEPRECATED!** Use `layer.listening(false)` instead. Disabling the hit graph will greatly increase draw performance because the hit graph will not be redrawn each time the layer is drawn. This, however, also disables mouse/touch event detection.

### Methods

- **batchDraw()** → Konva.Layer - Batch draw. This function will not do immediate draw but it will schedule drawing to next tick (requestAnimFrame)
- **enableHitGraph()** → Layer - Enable hit graph. **DEPRECATED!** Use `layer.listening(true)` instead.
- **disableHitGraph()** → Layer - Disable hit graph. **DEPRECATED!** Use `layer.listening(false)` instead.
- **toggleHitCanvas()** - Show or hide hit canvas over the stage. May be useful for debugging custom hitFunc

### Example

```javascript
var layer = new Konva.Layer();
stage.add(layer);
// now you can add shapes, groups into the layer
```
```

--------------------------------

### Konva.FastLayer Constructor and Usage

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Details the Konva.FastLayer constructor, its configuration options, and provides an example of its usage. Note that FastLayer is deprecated.

```APIDOC
## Konva.FastLayer extends Konva.Layer

FastLayer constructor. **DEPRECATED!** Please use `Konva.Layer({ listening: false})` instead. Layers are tied to their own canvas element and are used to contain shapes only. If you don't need node nesting, mouse and touch interactions, or event pub/sub, you should use FastLayer instead of Layer to create your layers. It renders about 2x faster than normal layers.

### Constructor Config

- **clip** (Object) - Optional - Set clip
- **clipX** (Number) - Optional - Set clip x
- **clipY** (Number) - Optional - Set clip y
- **clipWidth** (Number) - Optional - Set clip width
- **clipHeight** (Number) - Optional - Set clip height
- **clipFunc** (function) - Optional - Set clip func

### Example

```javascript
var layer = new Konva.FastLayer();
```
```

--------------------------------

### Konva.Shape Example

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Example of creating and defining a custom Konva shape.

```APIDOC
## Konva.Shape Example

### Description
An example demonstrating how to create a custom Konva shape with a `sceneFunc` to define its drawing logic.

### Request Example
```javascript
var customShape = new Konva.Shape({
  x: 5,
  y: 10,
  fill: 'red',
  // a Konva.Canvas renderer is passed into the sceneFunc function
  sceneFunc (context, shape) {
    context.beginPath();
    context.moveTo(200, 50);
    context.lineTo(420, 80);
    context.quadraticCurveTo(300, 100, 260, 170);
    context.closePath();
    // Konva specific method
    context.fillStrokeShape(shape);
  }
});
```
```

--------------------------------

### Konva.Star Properties and Example

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

This snippet covers the properties of the Konva.Star class and demonstrates how to create a star shape.

```APIDOC
## Konva.Star

### Description
Represents a star shape in Konva.js.

### Properties
- **dragDistance** (Number) - Optional - The distance the mouse must move before dragging starts.
- **dragBoundFunc** (function) - Optional - A function to constrain the drag boundaries.
- **numPoints** (Number) - Getter/Setter - The number of points on the star.
- **innerRadius** (Number) - Getter/Setter - The inner radius of the star.
- **outerRadius** (Number) - Getter/Setter - The outer radius of the star.

### Request Example
```javascript
var star = new Konva.Star({
  x: 100,
  y: 200,
  numPoints: 5,
  innerRadius: 70,
  outerRadius: 70,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4
});
```

### Response
(No specific response details provided for this class constructor.)
```

--------------------------------

### Create and Style Konva TextPath with Custom Kerning

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

This example shows how to create a Konva.js TextPath object. It defines custom kerning pairs and applies them to the text path for fine-tuned character spacing. Ensure the kerningPairs object is correctly defined and accessible within the kerningFunc.

```javascript
var kerningPairs = {
  'A': {
    ' ': -0.05517578125,
    'T': -0.07421875,
    'V': -0.07421875
  }
  'V': {
    ',': -0.091796875,
    ":": -0.037109375,
    ";": -0.037109375,
    "A": -0.07421875
  }
}
var textpath = new Konva.TextPath({
  x: 100,
  y: 50,
  fill: '#333',
  fontSize: '24',
  fontFamily: 'Arial',
  text: 'All the world\'s a stage, and all the men and women merely players.',
  data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50',
  kerningFunc(leftChar, rightChar) {
    return kerningPairs.hasOwnProperty(leftChar) ? pairs[leftChar][rightChar] || 0 : 0
  }
});
```

--------------------------------

### Load Image and Create Konva.Image

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Load an image from a URL and then create a Konva.Image instance. Ensure the image object has loaded before using it.

```javascript
var imageObj = new Image();
imageObj.onload = function() {
  var image = new Konva.Image({
    x: 200,
    y: 50,
    image: imageObj,
    width: 100,
    height: 100
  });
};
imageObj.src = '/path/to/image.jpg'
```

--------------------------------

### Konva.Image Constructor

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Configuration options for initializing a new Konva.Image instance.

```APIDOC
## Konva.Image Constructor

### Description
Initializes a new Konva.Image object with the provided configuration settings.

### Request Body
- **image** (Image) - Required - The image source.
- **crop** (Object) - Optional - Crop configuration.
- **fill** (String) - Optional - Fill color.
- **fillPatternImage** (Image) - Optional - Fill pattern image.
- **fillPatternX** (Number) - Optional - X coordinate for fill pattern.
- **fillPatternY** (Number) - Optional - Y coordinate for fill pattern.
- **fillPatternOffset** (Object) - Optional - Offset object with x and y.
- **fillPatternRepeat** (String) - Optional - Repeat mode: "repeat", "repeat-x", "repeat-y", or "no-repeat".
- **fillPriority** (String) - Optional - Priority: "color", "linear-gradient", "radial-gradient", or "pattern".
- **stroke** (String) - Optional - Stroke color.
- **strokeWidth** (Number) - Optional - Stroke width.
- **x** (Number) - Optional - X position.
- **y** (Number) - Optional - Y position.
- **width** (Number) - Optional - Width of the image.
- **height** (Number) - Optional - Height of the image.
- **visible** (Boolean) - Optional - Visibility flag.
- **id** (String) - Optional - Unique identifier.
- **name** (String) - Optional - Non-unique name.
- **opacity** (Number) - Optional - Opacity between 0 and 1.
- **rotation** (Number) - Optional - Rotation in degrees.
- **draggable** (Boolean) - Optional - Enables dragging.
```

--------------------------------

### Konva Text Properties (Getters/Setters)

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

These properties can be used to get or set values on an existing Konva.Text object.

```APIDOC
## Konva Text Properties (Getters/Setters)

### Description
Properties that can be accessed or modified on an existing Konva.Text object.

### Properties
- **getTextWidth** (Number) - Get pure text width without padding
- **width** (Number) - Get/set width of text area, which includes padding.
- **height** (Number) - Get/set the height of the text area, which takes into account multi-line text, line heights, and padding.
- **direction** (String) - Get/set direction
- **fontFamily** (String) - Get/set font family
- **fontSize** (Number) - Get/set font size in pixels
- **fontStyle** (String) - Get/set font style. Can be 'normal', 'italic', or 'bold', '500' or even 'italic bold'. 'normal' is the default.
- **fontVariant** (String) - Get/set font variant. Can be 'normal' or 'small-caps'. 'normal' is the default.
- **padding** (Number) - Get/set padding
- **align** (String) - Get/set horizontal align of text. Can be 'left', 'center', 'right' or 'justify'
- **verticalAlign** (String) - Get/set vertical align of text. Can be 'top', 'middle', 'bottom'.
- **lineHeight** (Number) - Get/set line height. The default is 1.
- **wrap** (String) - Get/set wrap. Can be "word", "char", or "none". Default is "word". In "word" wrapping any word still can be wrapped if it can't be placed in the required width without breaks.
- **ellipsis** (Boolean) - Get/set ellipsis. Can be true or false. Default is false. If ellipses is true, Konva will add "..." at the end of the text if it doesn't have enough space to write characters. That is possible only when you limit both width and height of the text
- **letterSpacing** (Number) - Set letter spacing property. Default value is 0.
- **text** (String) - Get/set text
- **textDecoration** (String) - Get/set text decoration of a text. Possible values are 'underline', 'line-through' or combination of these values separated by space
- **underlineOffset** (Number) - Get/set text underline decoration offset. Offset for underline line. Default is calculated based on font size.
- **charRenderFunc** (function) - Get/set per-character render hook. The callback is invoked for each grapheme before drawing. It can mutate the provided context (e.g. translate, rotate, change styles) and should return void. Note: per-character rendering may disable native kerning/ligatures.
```

--------------------------------

### Konva.Container Configuration

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Configuration options for initializing a Konva.Container.

```APIDOC
## Konva.Container Constructor

### Configuration
- **x** (Number) - Optional
- **y** (Number) - Optional
- **width** (Number) - Optional
- **height** (Number) - Optional
- **visible** (Boolean) - Optional
- **listening** (Boolean) - Optional
- **id** (String) - Optional
- **name** (String) - Optional
- **opacity** (Number) - Optional
- **scale** (Object) - Optional
- **draggable** (Boolean) - Optional
- **clipX** (Number) - Optional
- **clipY** (Number) - Optional
- **clipWidth** (Number) - Optional
- **clipHeight** (Number) - Optional
- **clipFunc** (function) - Optional
```

--------------------------------

### Konva.Stage Constructor and Properties

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Details on creating a Konva.Stage and its core properties.

```APIDOC
## Konva.Stage

Stage constructor. A stage is used to contain multiple layers.

### Constructor Config

- **container** (String | Element) - Required. Container selector or DOM element.
- **x** (Number) - Optional. The x-coordinate of the stage.
- **y** (Number) - Optional. The y-coordinate of the stage.
- **width** (Number) - Optional. The width of the stage.
- **height** (Number) - Optional. The height of the stage.
- **visible** (Boolean) - Optional. Whether the stage is visible.
- **listening** (Boolean) - Optional. Whether the stage is listening for events.
- **id** (String) - Optional. Unique id for the stage.
- **name** (String) - Optional. Non-unique name for the stage.
- **opacity** (Number) - Optional. Opacity of the stage (0 to 1).
- **scale** (Object) - Optional. Scale object {x, y}.
- **scaleX** (Number) - Optional. Scale factor for the x-axis.
- **scaleY** (Number) - Optional. Scale factor for the y-axis.
- **rotation** (Number) - Optional. Rotation in degrees.
- **offset** (Object) - Optional. Offset object {x, y}.
- **offsetX** (Number) - Optional. Offset on the x-axis.
- **offsetY** (Number) - Optional. Offset on the y-axis.
- **draggable** (Boolean) - Optional. Makes the stage draggable.
- **dragDistance** (Number) - Optional. The distance the mouse must move to initiate dragging.
- **dragBoundFunc** (function) - Optional. A function to constrain the drag boundaries.

### Properties (getter/setter)

- **setContainer** (DomElement) - Sets the container DOM element.
- **getIntersection** (Konva.Node) - Gets the visible intersection shape. Nodes with `listening: false` are not detected.
- **container** (DomElement) - Gets or sets the container DOM element.
```

--------------------------------

### Konva.Circle Constructor

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Configuration options for initializing a new Konva.Circle instance.

```APIDOC
## Konva.Circle Constructor

### Description
Initializes a new circle shape within the Konva framework.

### Parameters
#### Request Body
- **radius** (Number) - Required - Radius of the circle
- **fill** (String) - Optional - Fill color
- **fillPatternImage** (Image) - Optional - Fill pattern image
- **fillPatternX** (Number) - Optional - Fill pattern X position
- **fillPatternY** (Number) - Optional - Fill pattern Y position
- **fillPatternOffset** (Object) - Optional - Object with x and y component
- **fillPatternOffsetX** (Number) - Optional - Fill pattern offset X
- **fillPatternOffsetY** (Number) - Optional - Fill pattern offset Y
- **fillPatternScale** (Object) - Optional - Object with x and y component
- **fillPatternScaleX** (Number) - Optional - Fill pattern scale X
- **fillPatternScaleY** (Number) - Optional - Fill pattern scale Y
- **fillPatternRotation** (Number) - Optional - Fill pattern rotation
- **fillPatternRepeat** (String) - Optional - Pattern repeat mode (repeat, repeat-x, repeat-y, no-repeat)
- **fillLinearGradientStartPoint** (Object) - Optional - Gradient start point object
- **fillLinearGradientStartPointX** (Number) - Optional - Gradient start point X
- **fillLinearGradientStartPointY** (Number) - Optional - Gradient start point Y
- **fillLinearGradientEndPoint** (Object) - Optional - Gradient end point object
- **fillLinearGradientEndPointX** (Number) - Optional - Gradient end point X
- **fillLinearGradientEndPointY** (Number) - Optional - Gradient end point Y
- **fillLinearGradientColorStops** (Array) - Optional - Array of color stops
- **fillRadialGradientStartPoint** (Object) - Optional - Radial gradient start point object
- **fillRadialGradientStartPointX** (Number) - Optional - Radial gradient start point X
- **fillRadialGradientStartPointY** (Number) - Optional - Radial gradient start point Y
- **fillRadialGradientEndPoint** (Object) - Optional - Radial gradient end point object
- **fillRadialGradientEndPointX** (Number) - Optional - Radial gradient end point X
- **fillRadialGradientEndPointY** (Number) - Optional - Radial gradient end point Y
- **fillRadialGradientStartRadius** (Number) - Optional - Radial gradient start radius
- **fillRadialGradientEndRadius** (Number) - Optional - Radial gradient end radius
- **fillRadialGradientColorStops** (Array) - Optional - Array of color stops
- **fillEnabled** (Boolean) - Optional - Enables or disables fill
- **fillPriority** (String) - Optional - Fill priority (color, linear-gradient, radial-graident, pattern)
- **stroke** (String) - Optional - Stroke color
- **strokeWidth** (Number) - Optional - Stroke width
- **fillAfterStrokeEnabled** (Boolean) - Optional - Draw fill after stroke
- **hitStrokeWidth** (Number) - Optional - Stroke size on hit canvas
- **strokeHitEnabled** (Boolean) - Optional - Enable stroke hit region
- **perfectDrawEnabled** (Boolean) - Optional - Enable buffer canvas
- **shadowForStrokeEnabled** (Boolean) - Optional - Enable shadow for stroke
- **strokeScaleEnabled** (Boolean) - Optional - Enable stroke scale
- **strokeEnabled** (Boolean) - Optional - Enable stroke
- **lineJoin** (String) - Optional - Line join style (miter, round, bevel)
- **lineCap** (String) - Optional - Line cap style (butt, round, square)
- **shadowColor** (String) - Optional - Shadow color
- **shadowBlur** (Number) - Optional - Shadow blur
- **shadowOffset** (Object) - Optional - Shadow offset object
- **shadowOffsetX** (Number) - Optional - Shadow offset X
- **shadowOffsetY** (Number) - Optional - Shadow offset Y
- **shadowOpacity** (Number) - Optional - Shadow opacity (0-1)
- **shadowEnabled** (Boolean) - Optional - Enable shadow
- **dash** (Array) - Optional - Dash array
- **dashEnabled** (Boolean) - Optional - Enable dash array
- **x** (Number) - Optional - X position
- **y** (Number) - Optional - Y position
- **width** (Number) - Optional - Width
- **height** (Number) - Optional - Height
- **visible** (Boolean) - Optional - Visibility flag
- **listening** (Boolean) - Optional - Event listening flag
- **id** (String) - Optional - Unique ID
- **name** (String) - Optional - Non-unique name
- **opacity** (Number) - Optional - Opacity (0-1)
- **scale** (Object) - Optional - Scale object
- **scaleX** (Number) - Optional - Scale X
- **scaleY** (Number) - Optional - Scale Y
- **rotation** (Number) - Optional - Rotation in degrees
- **offset** (Object) - Optional - Offset object
- **offsetX** (Number) - Optional - Offset X
- **offsetY** (Number) - Optional - Offset Y
- **draggable** (Boolean) - Optional - Draggable flag
- **dragDistance** (Number) - Optional - Drag distance
```

--------------------------------

### Konva.Text Constructor

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Configuration options for initializing a new Konva.Text object.

```APIDOC
## Konva.Text Constructor

### Description
Initializes a new text shape on the canvas. The constructor accepts a configuration object to define appearance, layout, and styling.

### Parameters
#### Request Body
- **text** (String) - Required - The text content to display.
- **direction** (String) - Optional - Text direction (default: inherit).
- **fontFamily** (String) - Optional - Font family (default: Arial).
- **fontSize** (Number) - Optional - Font size in pixels (default: 12).
- **fontStyle** (String) - Optional - Style like 'normal', 'italic', 'bold' (default: normal).
- **fontVariant** (String) - Optional - Variant like 'normal' or 'small-caps' (default: normal).
- **textDecoration** (String) - Optional - Decoration like 'line-through', 'underline' (default: empty).
- **align** (String) - Optional - Alignment: 'left', 'center', 'right', 'justify'.
- **verticalAlign** (String) - Optional - Vertical alignment: 'top', 'middle', 'bottom'.
- **padding** (Number) - Optional - Padding around the text.
- **lineHeight** (Number) - Optional - Line height multiplier (default: 1).
- **wrap** (String) - Optional - Wrapping mode: 'word', 'char', 'none' (default: word).
- **ellipsis** (Boolean) - Optional - Whether to show ellipsis if text overflows (default: false).
- **fill** (String) - Optional - Fill color.
- **stroke** (String) - Optional - Stroke color.
- **strokeWidth** (Number) - Optional - Stroke width.
- **shadowColor** (String) - Optional - Shadow color.
- **shadowBlur** (Number) - Optional - Shadow blur radius.
```

--------------------------------

### Konva.Path Properties and Methods

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Overview of the available properties and methods for the Konva.Path object.

```APIDOC
## Konva.Path Properties and Methods

### Properties
- **data** (String) - Get/set SVG path data string. Automatically parses data into an array. Supported commands: M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z.

### Methods
- **getPointAtLength(length)** - Returns an Object representing the point on the path at a specific length.
- **getLength()** - Returns a Number representing the total length of the path.

### Example
```javascript
var path = new Konva.Path({
  x: 240,
  y: 40,
  data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
  fill: 'green',
  scaleX: 2,
  scaleY: 2
});
```
```

--------------------------------

### Konva.Transformer Constructor

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Configuration options for initializing a new Konva.Transformer instance.

```APIDOC
## Konva.Transformer Constructor

### Description
Initializes a new Transformer instance to manage the transformation of Konva nodes.

### Request Body
- **resizeEnabled** (Boolean) - Optional - Default: true
- **rotateEnabled** (Boolean) - Optional - Default: true
- **rotateLineVisible** (Boolean) - Optional - Default: true
- **rotationSnaps** (Array) - Optional - Default: []
- **rotationSnapTolerance** (Number) - Optional - Default: 5
- **rotateAnchorOffset** (Number) - Optional - Default: 50
- **rotateAnchorCursor** (String) - Optional - Default: 'crosshair'
- **padding** (Number) - Optional - Default: 0
- **borderEnabled** (Boolean) - Optional - Default: true
- **borderStroke** (String) - Optional - Border stroke color
- **borderStrokeWidth** (Number) - Optional - Border stroke size
- **borderDash** (Array) - Optional - Border dash array
- **anchorFill** (String) - Optional - Anchor fill color
- **anchorStroke** (String) - Optional - Anchor stroke color
- **anchorCornerRadius** (Number) - Optional - Anchor corner radius
- **anchorStrokeWidth** (Number) - Optional - Anchor stroke size
- **anchorSize** (Number) - Optional - Default: 10
- **keepRatio** (Boolean) - Optional - Default: true
- **shiftBehavior** (String) - Optional - Default: 'default'
- **centeredScaling** (Boolean) - Optional - Default: false
- **enabledAnchors** (Array) - Optional - Enabled handles
- **flipEnabled** (Boolean) - Optional - Default: true
- **boundBoxFunc** (function) - Optional - Bounding box function
- **ignoreStroke** (function) - Optional - Default: false
- **useSingleNodeRotation** (Boolean) - Optional - Use node rotation for transformer
- **shouldOverdrawWholeArea** (Boolean) - Optional - Fill area with fake shape for dragging
```

--------------------------------

### Konva.Star Constructor

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Defines the configuration object used to initialize a new Konva.Star instance.

```APIDOC
## Konva.Star Constructor

### Description
Initializes a new star shape. The constructor accepts a configuration object to define geometry, fill, stroke, shadow, and transformation properties.

### Parameters
#### Request Body
- **numPoints** (Integer) - Required - Number of points for the star
- **innerRadius** (Number) - Required - Inner radius of the star
- **outerRadius** (Number) - Required - Outer radius of the star
- **fill** (String) - Optional - Fill color
- **stroke** (String) - Optional - Stroke color
- **strokeWidth** (Number) - Optional - Stroke width
- **x** (Number) - Optional - X position
- **y** (Number) - Optional - Y position
- **draggable** (Boolean) - Optional - Whether the node is draggable
- **id** (String) - Optional - Unique identifier
- **name** (String) - Optional - Non-unique name
- **opacity** (Number) - Optional - Opacity between 0 and 1
- **rotation** (Number) - Optional - Rotation in degrees
- **visible** (Boolean) - Optional - Visibility flag

### Request Example
{
  "numPoints": 5,
  "innerRadius": 20,
  "outerRadius": 50,
  "fill": "red",
  "stroke": "black",
  "strokeWidth": 4
}
```

--------------------------------

### Konva.Arrow Constructor

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Configuration options for the Konva.Arrow constructor.

```APIDOC
## Konva.Arrow extends Konva.Line

Arrow constructor

### Constructor Config

- **points** (Array) - Flat array of points coordinates. You should define them as [x1, y1, x2, y2, x3, y3].
- **tension** (Number, optional) - Higher values will result in a more curvy line. A value of 0 will result in no interpolation. The default is 0.
- **pointerLength** (Number) - Arrow pointer length. Default value is 10.
- **pointerWidth** (Number) - Arrow pointer width. Default value is 10.
- **pointerAtBeginning** (Boolean) - Do we need to draw pointer on beginning position?. Default false.
- **pointerAtEnding** (Boolean) - Do we need to draw pointer on ending position?. Default true.
- **fill** (String, optional) - fill color
- **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
- **strokeWidth** (Number, optional) - stroke width
- **fillAfterStrokeEnabled** (Boolean, optional) - Should we draw fill AFTER stroke? Default is false.
- **hitStrokeWidth** (Number, optional) - size of the stroke on hit canvas. The default is "auto" - equals to strokeWidth
- **strokeHitEnabled** (Boolean, optional) - flag which enables or disables stroke hit region. The default is true
- **perfectDrawEnabled** (Boolean, optional) - flag which enables or disables using buffer canvas. The default is true
- **shadowForStrokeEnabled** (Boolean, optional) - flag which enables or disables shadow for stroke. The default is true
- **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 square. The default is butt
- **shadowColor** (String, optional)
- **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
```

--------------------------------

### Create a Konva.Path instance

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Initializes a new path object with specific SVG data, fill color, and scaling properties.

```javascript
var path = new Konva.Path({
  x: 240,
  y: 40,
  data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
  fill: 'green',
  scaleX: 2,
  scaleY: 2
});
```

--------------------------------

### Initialize a Konva.Ring

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Create a new ring instance by defining its inner and outer radii along with styling properties.

```javascript
var ring = new Konva.Ring({
  innerRadius: 40,
  outerRadius: 80,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 5
});
```

--------------------------------

### Konva.Sprite Constructor

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Details the configuration object required to initialize a new Konva.Sprite instance.

```APIDOC
## Constructor: new Konva.Sprite(config)

### Description
Creates a new Sprite instance. The sprite is used to render animations based on a provided image and animation map.

### Parameters
#### Request Body (config object)
- **animation** (String) - Required - Animation key
- **animations** (Object) - Required - Animation map
- **image** (Image) - Required - Image object
- **frameIndex** (Integer) - Optional - Animation frame index
- **frameRate** (Integer) - Optional - Animation frame rate
- **fill** (String) - Optional - Fill color
- **stroke** (String) - Optional - Stroke color
- **strokeWidth** (Number) - Optional - Stroke width
- **x** (Number) - Optional - X position
- **y** (Number) - Optional - Y position
- **width** (Number) - Optional - Width
- **height** (Number) - Optional - Height
- **visible** (Boolean) - Optional - Visibility flag
- **id** (String) - Optional - Unique id
- **name** (String) - Optional - Non-unique name
- **opacity** (Number) - Optional - Opacity (0 to 1)
- **rotation** (Number) - Optional - Rotation in degrees
```

--------------------------------

### Initialize a Konva.Text shape

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Creates a new text instance with specified position, content, and font styling.

```javascript
var text = new Konva.Text({
  x: 10,
  y: 15,
  text: 'Simple Text',
  fontSize: 30,
  fontFamily: 'Calibri',
  fill: 'green'
});
```

--------------------------------

### Initialize a Konva.Wedge

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Creates a new wedge instance with specific radius, fill, stroke, and rotation properties.

```javascript
// draw a wedge that's pointing downwards
var wedge = new Konva.Wedge({
  radius: 40,
  fill: 'red',
  stroke: 'black'
  strokeWidth: 5,
  angleDeg: 60,
  rotationDeg: -120
});
```

--------------------------------

### Konva.Node Constructor

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Configuration parameters for the Konva.Node constructor, which serves as the base class for all visual elements.

```APIDOC
## Konva.Node Constructor

### Description
Constructor configuration for creating a new Konva.Node instance.

### Parameters
#### Request Body
- **x** (Number) - Optional - X position
- **y** (Number) - Optional - Y position
- **width** (Number) - Optional - Width
- **height** (Number) - Optional - Height
- **visible** (Boolean) - Optional - Visibility state
- **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 - Node opacity (0 to 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
- **offsetX** (Number) - Optional - Set offset x
- **offsetY** (Number) - Optional - Set offset y
- **draggable** (Boolean) - Optional - Makes the node draggable
- **dragDistance** (Number) - Optional - Drag distance
- **dragBoundFunc** (function) - Optional - Drag bound function
```

--------------------------------

### Konva.Group Constructor

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Instantiate a new Konva.Group with various configuration options.

```APIDOC
## Konva.Group Constructor

### Description
Creates a new Konva.Group, which serves as a container for other Konva shapes or groups.

### Method
Constructor

### Endpoint
N/A (Client-side JavaScript)

### Parameters
#### Constructor Config
- **x** (Number) - Optional - The x-coordinate of the group.
- **y** (Number) - Optional - The y-coordinate of the group.
- **width** (Number) - Optional - The width of the group.
- **height** (Number) - Optional - The height of the group.
- **visible** (Boolean) - Optional - Whether the group is visible.
- **listening** (Boolean) - Optional - Whether the group listens for events.
- **id** (String) - Optional - A unique identifier for the group.
- **name** (String) - Optional - A non-unique name for the group.
- **opacity** (Number) - Optional - The opacity of the group (0 to 1).
- **scale** (Object) - Optional - Scale properties for the group.
- **scaleX** (Number) - Optional - Scale factor for the x-axis.
- **scaleY** (Number) - Optional - Scale factor for the y-axis.
- **rotation** (Number) - Optional - Rotation angle in degrees.
- **offset** (Object) - Optional - Offset properties for rotation and center point.
- **offsetX** (Number) - Optional - Offset on the x-axis.
- **offsetY** (Number) - Optional - Offset on the y-axis.
- **draggable** (Boolean) - Optional - Makes the group draggable.
- **dragDistance** (Number) - Optional - The distance the mouse must move to initiate dragging.
- **dragBoundFunc** (function) - Optional - A function to constrain the drag bounds.
- **clipX** (Number) - Optional - The x-coordinate for clipping.
- **clipY** (Number) - Optional - The y-coordinate for clipping.
- **clipWidth** (Number) - Optional - The width for clipping.
- **clipHeight** (Number) - Optional - The height for clipping.
- **clipFunc** (function) - Optional - A custom function for clipping.

### Request Example
```javascript
var group = new Konva.Group({
  x: 10,
  y: 10,
  opacity: 0.8
});
```

### Response
#### Success Response (200)
N/A (Client-side instantiation)

#### Response Example
N/A
```

--------------------------------

### Create a Konva Stage

Source: https://konvajs.org/assets/files/llms-full-5433ce8c6b4393a00218a98a097e8fb8.txt

Instantiate a Konva.Stage to serve as the main container for your application. Specify the width, height, and the ID or selector of the DOM element that will contain the stage.

```javascript
var stage = new Konva.Stage({
  width: 500,
  height: 800,
  container: 'containerId' // or "#containerId" or ".containerClass"
});
```
Tokens:
Raw