### Konva Basic Initialization

Source: https://github.com/konvajs/site/blob/new/content/docs/overview.md

Demonstrates the minimal setup required to initialize a Konva stage, add a layer, and draw a basic shape (a red circle with a black stroke). This serves as a foundational example for getting started with Konva.

```javascript
var stage = new Konva.Stage({
  container: 'container',
  width: 500,
  height: 500,
});

var layer = new Konva.Layer();

var circle = new Konva.Circle({
  x: stage.width() / 2,
  y: stage.height() / 2,
  radius: 70,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4,
});

layer.add(circle);

stage.add(layer);
```

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

### Start Local Development Server

Source: https://github.com/konvajs/site/blob/new/README.md

Starts a local development server for live preview. Changes are reflected without a server restart.

```bash
$ yarn start
```

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

### Konva Node.js Setup and Export (Legacy ≤ 9)

Source: https://github.com/konvajs/site/blob/new/content/docs/nodejs/index.mdx

An example demonstrating the setup and usage of legacy Konva versions (≤ 9) in a Node.js environment, including creating a stage and exporting it as a data URL.

```javascript
const Konva = require('konva');

// Create a stage
const stage = new Konva.Stage({
  container: 'container', // This will be ignored in Node.js
  width: 800,
  height: 600
});

// ... the rest of your konva code

// Export as data URL
const dataURL = stage.toDataURL();
```

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

### Implement Resize Snapping with Konva Transformer

Source: https://github.com/konvajs/site/blob/new/content/docs/select_and_transform/08_Resize_Snaps.mdx

This example shows how to use anchorDragBoundFunc to snap a shape's resize anchor to a vertical guide line when it gets within a 10-pixel threshold. It is implemented across Vanilla JS, React, and Vue frameworks.

```javascript
const tr = new Konva.Transformer({
  nodes: [rect],
  anchorDragBoundFunc: function (oldPos, newPos) {
    const dist = Math.sqrt(Math.pow(newPos.x - width / 2, 2));
    if (dist < 10) {
      return {
        ...newPos,
        x: width / 2,
      };
    }
    return newPos;
  },
});
```

```react
<Transformer
  ref={trRef}
  anchorDragBoundFunc={(oldPos, newPos) => {
    const dist = Math.sqrt(Math.pow(newPos.x - window.innerWidth / 2, 2));
    if (dist < 10) {
      return {
        ...newPos,
        x: window.innerWidth / 2,
      };
    }
    return newPos;
  }}
/>
```

```vue
const transformerConfig = {
  anchorDragBoundFunc: (oldPos, newPos) => {
    const dist = Math.sqrt(Math.pow(newPos.x - window.innerWidth / 2, 2));
    if (dist < 10) {
      return {
        ...newPos,
        x: window.innerWidth / 2,
      };
    }
    return newPos;
  }
};
```

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

### Radial Gradient Start Point Y

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Ring.mdx

Get or set the y-coordinate of the radial gradient start point.

```APIDOC
## fillRadialGradientStartPointY(y)

### Description
Get or set the y-coordinate of the radial gradient start point.

### Method
GET/SET

### Endpoint
N/A (Method on Shape object)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **y** (Number) - Optional - The y-coordinate of the start point.

### Request Example
```javascript
// Get start point y
var startPointY = shape.fillRadialGradientStartPointY();

// Set start point y
shape.fillRadialGradientStartPointY(20);
```

### Response
#### Success Response (200)
- **y** (Number) - The current y-coordinate of the radial gradient start point.

#### Response Example
```json
20
```
```

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

### Radial Gradient Start Point

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Ring.mdx

Get or set the start point for a radial gradient fill.

```APIDOC
## fillRadialGradientStartPoint(startPoint)

### Description
Get or set the start point for a radial gradient fill.

### Method
GET/SET

### Endpoint
N/A (Method on Shape object)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **startPoint** (Object) - Optional - The starting point for the radial gradient.
  - **x** (Number) - The x-coordinate of the start point.
  - **y** (Number) - The y-coordinate of the start point.

### Request Example
```javascript
// Get start point
var startPoint = shape.fillRadialGradientStartPoint();

// Set start point
shape.fillRadialGradientStartPoint({ x: 20, y: 10 });
```

### Response
#### Success Response (200)
- **startPoint** (Object) - The current start point of the radial gradient.
  - **x** (Number) - The x-coordinate.
  - **y** (Number) - The y-coordinate.

#### Response Example
```json
{
  "x": 20,
  "y": 10
}
```
```

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

### Install react-konva and konva

Source: https://github.com/konvajs/site/blob/new/content/docs/react/index.mdx

Install the necessary packages using npm.

```bash
npm install react-konva konva --save
```

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

### Konva Node.js Setup and Export (v10+)

Source: https://github.com/konvajs/site/blob/new/content/docs/nodejs/index.mdx

A complete example showing how to initialize Konva in a Node.js environment (with either canvas or skia backend imported) and export the stage content as a data URL.

```javascript
import Konva from 'konva';
import 'konva/canvas-backend'; // or 'konva/skia-backend'

// Create a stage
const stage = new Konva.Stage({
  container: 'container', // This will be ignored in Node.js
  width: 800,
  height: 600
});

// ... the rest of your konva code

// Export as data URL
const dataURL = stage.toDataURL();
```

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

### Radial Gradient Start Point X

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Ring.mdx

Get or set the x-coordinate of the radial gradient start point.

```APIDOC
## fillRadialGradientStartPointX(x)

### Description
Get or set the x-coordinate of the radial gradient start point.

### Method
GET/SET

### Endpoint
N/A (Method on Shape object)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **x** (Number) - Optional - The x-coordinate of the start point.

### Request Example
```javascript
// Get start point x
var startPointX = shape.fillRadialGradientStartPointX();

// Set start point x
shape.fillRadialGradientStartPointX(20);
```

### Response
#### Success Response (200)
- **x** (Number) - The current x-coordinate of the radial gradient start point.

#### Response Example
```json
20
```
```

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

### Fill Radial Gradient Start Radius

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Image.mdx

Gets or sets the start radius of a radial gradient fill.

```APIDOC
## fillRadialGradientStartRadius(radius)

### Description
Gets or sets the start radius of a radial gradient fill.

### Method
GET/SET

### Endpoint
N/A (Method on Shape object)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- `radius` (Number) - Required/Optional - The start radius of the radial gradient.

### Request Example
```javascript
// Get radial gradient start radius
var startRadius = shape.fillRadialGradientStartRadius();

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

### Response
#### Success Response (200)
- `Number` - The current start radius or the shape object for chaining.

#### Response Example
```json
0
```
```

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

### VueKonva CDN Setup with HTML

Source: https://github.com/konvajs/site/blob/new/content/docs/vue/index.mdx

This snippet shows a complete HTML file that includes Vue.js, Konva.js, and VueKonva via CDNs. It then initializes a Vue application to render a Konva stage with a circle. This setup is useful for quick prototyping or simple projects where a build process is not required.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>VueKonva CDN Example</title>
  </head>
  <body>
    <div id="app">
      <v-stage ref="stage" :config="configKonva">
        <v-layer ref="layer">
          <v-circle :config="configCircle" />
        </v-layer>
      </v-stage>
    </div>
    <!--1. Link Vue Javascript & Konva-->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/konva@9/konva.min.js"></script>
    <!--2. Link VueKonva Javascript (Plugin automatically installed)-->
    <script src="https://unpkg.com/vue-konva@3/dist/vue-konva.umd.js"></script>
    <script>
      // 3. Create the Vue instance
      const { createApp, ref } = Vue;
      const VueKonva = window['vue-konva'].default;
      
      const app = createApp({
        setup() {
          const configKonva = {
            width: 200,
            height: 200
          };
          
          const configCircle = {
            x: 100,
            y: 100,
            radius: 70,
            fill: 'red',
            stroke: 'black',
            strokeWidth: 4
          };
          
          return {
            configKonva,
            configCircle
          };
        }
      });
      
      app.use(VueKonva);
      app.mount('#app');
    </script>
  </body>
</html>
```

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

### Fill Radial Gradient Start Radius

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Arrow.mdx

Get or set the start radius for a radial gradient fill.

```APIDOC
## fillRadialGradientStartRadius(radius)

### Description
Get or set the start radius for a radial gradient fill.

### Method
GET/SET

### Endpoint
N/A (Method on Konva.Shape instance)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// get radial gradient start radius
var startRadius = shape.fillRadialGradientStartRadius();

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

### Response
#### Success Response (200)
- **radius** (Number) - The start radius of the radial gradient.

#### Response Example
```json
{
  "radius": 0
}
```
```

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

### React Quick Practices List Rendering

Source: https://github.com/konvajs/site/wiki/Home

Renders a list of 'Quick Practices', where each practice item displays a title and description. A 'Do now' button is provided for each practice, which triggers an alert with the practice description.

```jsx
{practices.map(p => (
  <div key={p.id} className="p-2 rounded border">
    <div className="flex justify-between items-center">
      <div>
        <div className="font-medium text-sm">{p.title}</div>
        <div className="text-xs text-slate-600">{p.desc}</div>
      </div>
      <button onClick={()=>{ alert(p.desc); }} className="text-sm px-2 py-1 border rounded">Do now</button>
    </div>
  </div>
))}
```

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

### Install Konva for TypeScript

Source: https://github.com/konvajs/site/blob/new/content/docs/faq.md

Shows how to install the base Konva package, which includes built-in TypeScript definitions for immediate use.

```bash
npm install konva
```

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

### Radial Gradient Start Point Y

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Shape.mdx

Allows getting and setting the Y coordinate of the radial gradient's start point.

```APIDOC
## GET/SET fillRadialGradientStartPointY(y)

### Description
Gets or sets the Y coordinate of the radial gradient's start point.

### Method
GET/SET

### Endpoint
shape.fillRadialGradientStartPointY()
shape.fillRadialGradientStartPointY(y)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// get fill radial gradient start point y
var startPointY = shape.fillRadialGradientStartPointY();

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

### Response
#### Success Response (200)
- **startPointY** (Number) - The Y coordinate of the radial gradient start point.

#### Response Example
```json
20
```
```

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

### Stroke Linear Gradient Start Point

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Rect.mdx

Get or set the stroke linear gradient start point for a shape.

```APIDOC
## strokeLinearGradientStartPoint(startPoint)

### Description
Get or set the stroke linear gradient start point for a shape.

### Method
GET/SET

### Endpoint
shape.strokeLinearGradientStartPoint()
shape.strokeLinearGradientStartPoint(startPoint)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// get stroke linear gradient start point
var startPoint = shape.strokeLinearGradientStartPoint();

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

### Response
#### Success Response (200)
- **startPoint** (Object) - The current stroke linear gradient start point.
  - **x** (Number) - The x-coordinate of the start point.
  - **y** (Number) - The y-coordinate of the start point.

#### Response Example
```json
{
  "startPoint": {
    "x": 20,
    "y": 10
  }
}
```
```

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

### Install Dependencies with Yarn

Source: https://github.com/konvajs/site/blob/new/README.md

Installs project dependencies using Yarn. Run this command after cloning the repository.

```bash
$ yarn
```

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

### Initialize Konva Image from URL

Source: https://github.com/konvajs/site/blob/new/static/llms-full.txt

Demonstrates how to create a new HTML Image object, load a source, and instantiate a Konva.Image component once the image has finished loading. This ensures the image dimensions are available for the Konva object.

```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';
```

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

### Fill Linear Gradient Start Point

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Rect.mdx

Get or set the fill linear gradient start point for a shape.

```APIDOC
## fillLinearGradientStartPoint(startPoint)

### Description
Get or set the fill linear gradient start point for a shape.

### Method
GET/SET

### Endpoint
shape.fillLinearGradientStartPoint()
shape.fillLinearGradientStartPoint(startPoint)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// get fill linear gradient start point
var startPoint = shape.fillLinearGradientStartPoint();

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

### Response
#### Success Response (200)
- **startPoint** (Object) - The current fill linear gradient start point.
  - **x** (Number) - The x-coordinate of the start point.
  - **y** (Number) - The y-coordinate of the start point.

#### Response Example
```json
{
  "startPoint": {
    "x": 20,
    "y": 10
  }
}
```
```

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

### Fill Radial Gradient Start Point

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Ellipse.mdx

Get or set the start point for a fill's radial gradient.

```APIDOC
## fillRadialGradientStartPoint(startPoint)

### Description
Get or set the start point for a fill's radial gradient.

### Method
GET/SET

### Endpoint
`shape.fillRadialGradientStartPoint()` or `shape.fillRadialGradientStartPoint(startPoint)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **startPoint** (Object) - Required - The start point object.
  - **startPoint.x** (Number) - Required - The x-coordinate of the start point.
  - **startPoint.y** (Number) - Required - The y-coordinate of the start point.

### Request Example
```javascript
// Get
var startPoint = shape.fillRadialGradientStartPoint();

// Set
shape.fillRadialGradientStartPoint({
  x: 20,
  y: 10
});
```

### Response
#### Success Response (200)
- `Object`: The start point object.

#### Response Example
```json
{
  "x": 20,
  "y": 10
}
```
```

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

### Konva.js Text Initialization Example

Source: https://github.com/konvajs/site/blob/new/static/llms-full.txt

Example demonstrating how to create and initialize a Konva.js Text object with basic properties.

```APIDOC
## Text Initialization Example

### Description
This example shows how to create a new Konva.Text object and set its initial properties.

### Method
`new Konva.Text(config)`

### Endpoint
N/A (Constructor)

### Request Body Example
```javascript
{
  "x": 10,
  "y": 15,
  "text": "Simple Text",
  "fontSize": 30,
  "fontFamily": "Calibri",
  "fill": "green"
}
```

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

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

### Initialize Konva.Text Node

Source: https://github.com/konvajs/site/blob/new/static/llms-full.txt

Demonstrates how to instantiate a new Konva.Text object with basic configuration properties such as position, content, font settings, and fill color.

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

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

### Radial Gradient Start Point

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Shape.mdx

Allows getting and setting the X coordinate of the radial gradient's start point.

```APIDOC
## GET/SET fillRadialGradientStartPointX(x)

### Description
Gets or sets the X coordinate of the radial gradient's start point.

### Method
GET/SET

### Endpoint
shape.fillRadialGradientStartPointX()
shape.fillRadialGradientStartPointX(x)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// get fill radial gradient start point x
var startPointX = shape.fillRadialGradientStartPointX();

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

### Response
#### Success Response (200)
- **startPointX** (Number) - The X coordinate of the radial gradient start point.

#### Response Example
```json
20
```
```

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

### Stroke Linear Gradient Start Point API

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Sprite.mdx

Methods for getting and setting the start point of a linear gradient stroke.

```APIDOC
## strokeLinearGradientStartPoint(startPoint)

### Description
Gets or sets the start point of a linear gradient stroke.

### Method
GET/SET

### Endpoint
shape.strokeLinearGradientStartPoint()
shape.strokeLinearGradientStartPoint(startPoint)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **startPoint** (Object) - Required - The start point object to set.
  - **startPoint.x** (Number) - Required - The x-coordinate of the start point.
  - **startPoint.y** (Number) - Required - The y-coordinate of the start point.

### Request Example
```json
{
  "startPoint": {
    "x": 20,
    "y": 10
  }
}
```

### Response
#### Success Response (200)
- **startPoint** (Object) - The current linear gradient start point.
  - **x** (Number) - The x-coordinate.
  - **y** (Number) - The y-coordinate.

#### Response Example
```json
{
  "startPoint": {
    "x": 20,
    "y": 10
  }
}
```
```

```APIDOC
## strokeLinearGradientStartPointX(x)

### Description
Gets or sets the x-coordinate of the linear gradient stroke start point.

### Method
GET/SET

### Endpoint
shape.strokeLinearGradientStartPointX()
shape.strokeLinearGradientStartPointX(x)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **x** (Number) - Required - The x-coordinate value.

### Request Example
```json
{
  "x": 20
}
```

### Response
#### Success Response (200)
- **x** (Number) - The current x-coordinate of the linear gradient stroke start point.

#### Response Example
```json
{
  "x": 20
}
```
```

```APIDOC
## strokeLinearGradientStartPointY(y)

### Description
Gets or sets the y-coordinate of the linear gradient stroke start point.

### Method
GET/SET

### Endpoint
shape.strokeLinearGradientStartPointY()
shape.strokeLinearGradientStartPointY(y)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **y** (Number) - Required - The y-coordinate value.

### Request Example
```json
{
  "y": 20
}
```

### Response
#### Success Response (200)
- **y** (Number) - The current y-coordinate of the linear gradient stroke start point.

#### Response Example
```json
{
  "y": 20
}
```
```

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

### Create Konva Image Instance (JavaScript)

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Image.mdx

This snippet demonstrates how to create a new Konva.Image instance using its constructor. The constructor takes a configuration object as an argument, which is essential for defining the image's properties and behavior within the Konva stage.

```javascript
new Konva.Image(config)
```

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

### Fill Linear Gradient Start Point API

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Sprite.mdx

Methods for getting and setting the start point of a linear gradient fill.

```APIDOC
## fillLinearGradientStartPoint(startPoint)

### Description
Gets or sets the start point of a linear gradient fill.

### Method
GET/SET

### Endpoint
shape.fillLinearGradientStartPoint()
shape.fillLinearGradientStartPoint(startPoint)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **startPoint** (Object) - Required - The start point object to set.
  - **startPoint.x** (Number) - Required - The x-coordinate of the start point.
  - **startPoint.y** (Number) - Required - The y-coordinate of the start point.

### Request Example
```json
{
  "startPoint": {
    "x": 20,
    "y": 10
  }
}
```

### Response
#### Success Response (200)
- **startPoint** (Object) - The current linear gradient start point.
  - **x** (Number) - The x-coordinate.
  - **y** (Number) - The y-coordinate.

#### Response Example
```json
{
  "startPoint": {
    "x": 20,
    "y": 10
  }
}
```
```

```APIDOC
## fillLinearGradientStartPointX(x)

### Description
Gets or sets the x-coordinate of the linear gradient start point.

### Method
GET/SET

### Endpoint
shape.fillLinearGradientStartPointX()
shape.fillLinearGradientStartPointX(x)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **x** (Number) - Required - The x-coordinate value.

### Request Example
```json
{
  "x": 20
}
```

### Response
#### Success Response (200)
- **x** (Number) - The current x-coordinate of the linear gradient start point.

#### Response Example
```json
{
  "x": 20
}
```
```

```APIDOC
## fillLinearGradientStartPointY(y)

### Description
Gets or sets the y-coordinate of the linear gradient start point.

### Method
GET/SET

### Endpoint
shape.fillLinearGradientStartPointY()
shape.fillLinearGradientStartPointY(y)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **y** (Number) - Required - The y-coordinate value.

### Request Example
```json
{
  "y": 20
}
```

### Response
#### Success Response (200)
- **y** (Number) - The current y-coordinate of the linear gradient start point.

#### Response Example
```json
{
  "y": 20
}
```
```

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

### Install and Implement Konva with React

Source: https://github.com/konvajs/site/blob/new/content/docs/faq.md

Demonstrates how to install the react-konva package and render basic shapes like rectangles and circles within a React component.

```bash
npm install react-konva konva
```

```jsx
import { Stage, Layer, Rect, Circle } from 'react-konva';

function App() {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Rect x={20} y={20} width={100} height={100} fill="red" />
        <Circle x={200} y={100} radius={50} fill="green" />
      </Layer>
    </Stage>
  );
}
```

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

### Initialize and Manage Konva Stage

Source: https://context7.com/konvajs/site/llms.txt

Demonstrates how to create a Konva Stage, handle pointer events, perform hit detection, export to data URL, and serialize/deserialize the stage state.

```javascript
import Konva from 'konva';

const stage = new Konva.Stage({
  container: 'container',
  width: 800,
  height: 600,
});

stage.on('click', () => {
  const pos = stage.getPointerPosition();
  console.log('Click at:', pos.x, pos.y);
});

const shape = stage.getIntersection({ x: 100, y: 100 });

const dataURL = stage.toDataURL({
  mimeType: 'image/png',
  quality: 1,
  pixelRatio: 2
});

const json = stage.toJSON();
const restoredStage = Konva.Node.create(json, 'container');
```

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

### Stroke Linear Gradient Start Point Y

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Ring.mdx

Allows getting or setting the y-coordinate of the start point for the stroke linear gradient.

```APIDOC
## GET/SET strokeLinearGradientStartPointY(y)

### Description
Gets or sets the y-coordinate of the start point for the stroke linear gradient.

### Method
GET/SET

### Endpoint
shape.strokeLinearGradientStartPointY()
shape.strokeLinearGradientStartPointY(y)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **y** (Number) - Required - The y-coordinate for the gradient start point.

### Request Example
```javascript
// Get
var startPointY = shape.strokeLinearGradientStartPointY();

// Set
shape.strokeLinearGradientStartPointY(20);
```

### Response
#### Success Response (200)
- **Number** - The y-coordinate of the gradient start point.

#### Response Example
```json
20
```
```

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

### Initialize Image and Sticker Data

Source: https://github.com/konvajs/site/blob/new/content/docs/sandbox/Canvas_Sticker.mdx

Sets up initial image configuration and defines an array of sticker button data. The image loading is handled in `onMounted`.

```javascript
var imageConfig = { image: null, width: width, height: height };

var stickerButtons = [
  { emoji: '⭐', name: 'Star', type: 'star' },
  { emoji: '❤️', name: 'Heart', type: 'heart' },
  { emoji: '🔴', name: 'Badge', type: 'badge' },
  { emoji: '➡️', name: 'Arrow', type: 'arrow' },
];
```

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

### Fill Linear Gradient Start Point Y

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Ring.mdx

Allows getting or setting the y-coordinate of the start point for the fill linear gradient.

```APIDOC
## GET/SET fillLinearGradientStartPointY(y)

### Description
Gets or sets the y-coordinate of the start point for the fill linear gradient.

### Method
GET/SET

### Endpoint
shape.fillLinearGradientStartPointY()
shape.fillLinearGradientStartPointY(y)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **y** (Number) - Required - The y-coordinate for the gradient start point.

### Request Example
```javascript
// Get
var startPointY = shape.fillLinearGradientStartPointY();

// Set
shape.fillLinearGradientStartPointY(20);
```

### Response
#### Success Response (200)
- **Number** - The y-coordinate of the gradient start point.

#### Response Example
```json
20
```
```

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

### Konva.TextPath Constructor

Source: https://github.com/konvajs/site/blob/new/static/llms-full.txt

Configuration options for initializing a new Konva.TextPath instance.

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

### Description
Creates a new TextPath instance that renders text along a provided SVG path data string.

### Parameters
#### Request Body (Config Object)
- **text** (String) - Required - The text to display.
- **data** (String) - Required - SVG path data string.
- **fontFamily** (String) - Optional - Font family (default: Arial).
- **fontSize** (Number) - Optional - Font size (default: 12).
- **fontStyle** (String) - Optional - Font style (normal, italic, bold).
- **fill** (String) - Optional - Fill color.
- **stroke** (String) - Optional - Stroke color.
- **x** (Number) - Optional - X position.
- **y** (Number) - Optional - Y position.
- **shadowEnabled** (Boolean) - Optional - Enables or disables shadow (default: true).

### Request Example
{
  "text": "Hello World",
  "data": "M10,10 C 20,20, 40,20, 50,10",
  "fontSize": 20,
  "fill": "red"
}
```

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

### Fill Radial Gradient Start Radius Configuration

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Ring.mdx

Allows getting or setting the start radius for a radial gradient fill.

```APIDOC
## fillRadialGradientStartRadius(radius)

### Description
Get or set the start radius for a radial gradient fill.

### Method
`GET` or `POST` (setter)

### Endpoint
`/shape/fillRadialGradientStartRadius`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body (for setter)
- **radius** (Number) - The start radius for the radial gradient fill.

### Request Example (setter)
```json
{
  "radius": 0
}
```

### Response
#### Success Response (200)
- **radius** (Number) - The current or set start radius for the radial gradient fill.

#### Response Example (getter)
```json
{
  "radius": 0
}
```
```

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

### Initialize Konva Stage and Shapes

Source: https://github.com/konvajs/site/blob/new/content/docs/index.md

Demonstrates how to create a Konva stage, add a layer, and draw a draggable rectangle with event listeners. This example highlights the object-oriented nature of the framework.

```javascript
const stage = new Konva.Stage({
  container: 'container',
  width: 500,
  height: 400,
});
const layer = new Konva.Layer();
stage.add(layer);
const rect = new Konva.Rect({
  x: 50,
  y: 50,
  width: 100,
  height: 80,
  fill: 'cornflowerblue',
  shadowBlur: 5,
  cornerRadius: 4,
  draggable: true,
});
layer.add(rect);
rect.on('click tap', () => {
  rect.fill(Konva.Util.getRandomColor());
});
```

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

### Manage Fill Radial Gradient Start Point Y

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.RegularPolygon.mdx

Get or set the Y coordinate for the start point of a fill radial gradient.

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

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

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

### Stroke Linear Gradient Start Point Y

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Line.mdx

Allows getting or setting the y-coordinate of the start point for a stroke linear gradient.

```APIDOC
## strokeLinearGradientStartPointY(y)

### Description
Get or set the y-coordinate of the start point for a stroke linear gradient.

### Method
GET/SET

### Endpoint
shape.strokeLinearGradientStartPointY()

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **y** (Number) - Required - The y-coordinate of the start point.

### Request Example
```javascript
// Get
var startPointY = shape.strokeLinearGradientStartPointY();

// Set
shape.strokeLinearGradientStartPointY(20);
```

### Response
#### Success Response (200)
- **y** (Number) - The y-coordinate of the start point.

#### Response Example
```json
20
```
```

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

### Start Audio Recording and Speech Recognition (JavaScript)

Source: https://github.com/konvajs/site/wiki/Home

Initiates audio recording using the MediaRecorder API and starts Web Speech API for real-time transcription. Handles browser compatibility checks and potential errors. Stores audio blobs in IndexedDB and updates form state with transcription.

```javascript
async function startRecording(){
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
      alert('Audio recording not supported in this browser.');
      return;
    }
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      const mr = new MediaRecorder(stream);
      mediaRecorderRef.current = mr;
      audioChunksRef.current = [];
      mr.ondataavailable = e => audioChunksRef.current.push(e.data);
      mr.onstop = async () => {
        const blob = new Blob(audioChunksRef.current, { type: 'audio/webm' });
        const key = `audio_${Date.now()}`;
        try {
          await idbPut(key, blob);
          setForm(prev => ({ ...prev, audioKey: key }));
          const url = URL.createObjectURL(blob);
          setRecordingBlobUrl(url);
        } catch(err){ console.error('IndexedDB save failed', err); alert('Failed to save audio locally.'); }
      };
      mr.start();
      setRecording(true);

      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition || null;
      if (SpeechRecognition) {
        try {
          const recog = new SpeechRecognition();
          recog.lang = 'en-US';
          recog.interimResults = true;
          let interim = '';
          let final = '';
          recog.onresult = (ev) => {
            interim = '';
            for (let i=ev.resultIndex;i<ev.results.length;i++){
              const r = ev.results[i];
              if (r.isFinal) final += r[0].transcript + ' ';
              else interim += r[0].transcript;
            }
            setForm(prev => ({ ...prev, transcript: final + interim }));
          };
          recog.onerror = (e) => { console.warn('Speech recognition error', e); };
          recog.start();
          recognitionRef.current = recog;
        } catch(err){ console.warn('Speech recognition start failed', err); }
      }

    } catch (err) {
      alert('Could not start recording: ' + err.message);
    }
  }
```

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

### Fill Linear Gradient Start Point Y

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Line.mdx

Allows getting or setting the y-coordinate of the start point for a fill linear gradient.

```APIDOC
## fillLinearGradientStartPointY(y)

### Description
Get or set the y-coordinate of the start point for a fill linear gradient.

### Method
GET/SET

### Endpoint
shape.fillLinearGradientStartPointY()

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **y** (Number) - Required - The y-coordinate of the start point.

### Request Example
```javascript
// Get
var startPointY = shape.fillLinearGradientStartPointY();

// Set
shape.fillLinearGradientStartPointY(20);
```

### Response
#### Success Response (200)
- **y** (Number) - The y-coordinate of the start point.

#### Response Example
```json
20
```
```

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

### Download Audio from IndexedDB (JavaScript)

Source: https://github.com/konvajs/site/wiki/Home

Fetches an audio blob from IndexedDB by its key, creates a downloadable URL, and simulates a click on an anchor element to initiate the download. The file is named using the provided key.

```javascript
async function downloadAudioFromKey(key){
    const blob = await idbGet(key);
    if (!blob) return alert('Audio not found');
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a'); a.href = url; a.download = `${key}.webm`; a.click(); URL.revokeObjectURL(url);
  }
```

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

### Vue.js Setup for Konva.js Performance Demo

Source: https://github.com/konvajs/site/blob/new/content/docs/sandbox/Drag_and_Drop_Stress_Test.mdx

Sets up the Vue.js component, including Konva stage configuration, layer references, and state management for shapes. It initializes 10,000 circles with random positions and colors.

```vue
<template>
  <v-stage :config="stageConfig">
    <!-- Main layer for static circles -->
    <v-layer ref="mainLayer">
      <v-circle
        v-for="circle in circles"
        :key="circle.id"
        :config="{
          id: circle.id,
          x: circle.x,
          y: circle.y,
          radius: circle.radius,
          fill: circle.fill,
          draggable: true
        }"
        @dragstart="handleDragStart"
        @dragend="handleDragEnd"
      />
    </v-layer>
    
    <!-- Empty drag layer that will receive circles during drag -->
    <v-layer ref="dragLayer" />
  </v-stage>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const COLORS = ['red', 'orange', 'yellow', 'green', 'blue', 'cyan', 'purple'];
const SHAPE_COUNT = 10000;

const stageConfig = {
  width: window.innerWidth,
  height: window.innerHeight
};

// Refs for layers
const mainLayer = ref(null);
const dragLayer = ref(null);

// State for circles
const circles = ref([]);

// Initialize circles data
onMounted(() => {
  const circlesData = [];
  
  // Create 10,000 circles
  for (let i = 0; i < SHAPE_COUNT; i++) {
    circlesData.push({
      id: i,
      x: Math.random() * stageConfig.width,
      y: Math.random() * stageConfig.height,
      radius: 6,
      fill: COLORS[i % COLORS.length]
    });
  }
  
  circles.value = circlesData;
});

// This is not the typical "Vue way" of managing components.
// In a more Vue-friendly approach, we would update state and let Vue handle the DOM.
// However, for this performance demo, we're directly manipulating the nodes
// to match the vanilla JS implementation.
const handleDragStart = (e) => {
  const target = e.target;
  
  // Move the circle to the drag layer
  target.moveTo(dragLayer.value.getNode());
};

const handleDragEnd = (e) => {
  const target = e.target;
  
  // Move the circle back to the main layer
  target.moveTo(mainLayer.value.getNode());
};
</script>
```

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

### Stroke Linear Gradient Start Point

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Line.mdx

Allows getting or setting the start point of a linear gradient for the stroke property.

```APIDOC
## strokeLinearGradientStartPoint(startPoint)

### Description
Get or set the start point of a linear gradient for the stroke property.

### Method
GET/SET

### Endpoint
shape.strokeLinearGradientStartPoint()

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **startPoint** (Object) - Required - The start point object with x and y coordinates.
  - **startPoint.x** (Number) - Required - The x-coordinate of the start point.
  - **startPoint.y** (Number) - Required - The y-coordinate of the start point.

### Request Example
```javascript
// Get
var startPoint = shape.strokeLinearGradientStartPoint();

// Set
shape.strokeLinearGradientStartPoint({
  x: 20,
  y: 10
});
```

### Response
#### Success Response (200)
- **startPoint** (Object) - The start point of the linear gradient.
  - **x** (Number) - The x-coordinate.
  - **y** (Number) - The y-coordinate.

#### Response Example
```json
{
  "x": 20,
  "y": 10
}
```
```

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

### Instantiate Konva.Text Object

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Text.mdx

Demonstrates how to create a new Konva.Text object using its constructor. This requires a configuration object, which can include properties like text content, font size, color, and position.

```javascript
new Konva.Text(config)
```

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

### Fill Linear Gradient Start Point

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Line.mdx

Allows getting or setting the start point of a linear gradient for the fill property.

```APIDOC
## fillLinearGradientStartPoint(startPoint)

### Description
Get or set the start point of a linear gradient for the fill property.

### Method
GET/SET

### Endpoint
shape.fillLinearGradientStartPoint()

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **startPoint** (Object) - Required - The start point object with x and y coordinates.
  - **startPoint.x** (Number) - Required - The x-coordinate of the start point.
  - **startPoint.y** (Number) - Required - The y-coordinate of the start point.

### Request Example
```javascript
// Get
var startPoint = shape.fillLinearGradientStartPoint();

// Set
shape.fillLinearGradientStartPoint({
  x: 20,
  y: 10
});
```

### Response
#### Success Response (200)
- **startPoint** (Object) - The start point of the linear gradient.
  - **x** (Number) - The x-coordinate.
  - **y** (Number) - The y-coordinate.

#### Response Example
```json
{
  "x": 20,
  "y": 10
}
```
```

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

### Initialize Konva.Path

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Path.mdx

Creates a new instance of a Konva.Path object. The constructor accepts a configuration object containing the path data and styling properties.

```javascript
const path = new Konva.Path({
  data: "M10 10 H 90 V 90 H 10 L 10 10",
  fill: "red",
  stroke: "black",
  strokeWidth: 4
});
```

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

### Fill Radial Gradient Start Point Y

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Ellipse.mdx

Get or set the y-coordinate of the start point for a fill's radial gradient.

```APIDOC
## fillRadialGradientStartPointY(y)

### Description
Get or set the y-coordinate of the start point for a fill's radial gradient.

### Method
GET/SET

### Endpoint
`shape.fillRadialGradientStartPointY()` or `shape.fillRadialGradientStartPointY(y)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Get
var startPointY = shape.fillRadialGradientStartPointY();

// Set
shape.fillRadialGradientStartPointY(20);
```

### Response
#### Success Response (200)
- `Number`: The y-coordinate of the gradient start point.

#### Response Example
```json
20
```
```

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

### Konva.Path Constructor

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.Path.mdx

Demonstrates the basic usage of the Konva.Path constructor to create a new path object with configuration.

```APIDOC
## Konva.Path Constructor

### Description

The `Konva.Path` constructor is used to create a new path object. You can provide a configuration object to define its properties.

### Method

`new Konva.Path(config)`

### Endpoint

N/A (Client-side JavaScript constructor)

### Parameters

#### Path Parameters

None

#### Query Parameters

None

#### Request Body

- **config** (Object) - Required - An object containing the configuration properties for the path.
  - **x** (Number) - Optional - The x-coordinate of the path.
  - **y** (Number) - Optional - The y-coordinate of the path.
  - **data** (String) - Required - The SVG path data string defining the shape.
  - **fill** (String) - Optional - The fill color of the path.
  - **stroke** (String) - Optional - The stroke color of the path.
  - **strokeWidth** (Number) - Optional - The width of the path's stroke.
  - ... (other Konva.Shape properties)

### Request Example

```javascript
const path = new Konva.Path({
  x: 50,
  y: 50,
  data: 'M10 10 L90 10 L90 90 L10 90 Z',
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4
});
```

### Response

#### Success Response (200)

Returns a `Konva.Path` object instance.

#### Response Example

```javascript
// The constructor returns the Konva.Path object itself.
// Example of accessing properties after creation:
// path.getX(); // returns 50
```
```

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

### Stroke Linear Gradient Start Point

Source: https://github.com/konvajs/site/blob/new/content/api/Konva.TextPath.mdx

Allows getting or setting the stroke linear gradient start point for a Konva.js Shape.

```APIDOC
## strokeLinearGradientStartPoint(startPoint)

### Description
Gets or sets the stroke linear gradient start point for a Konva.js Shape.

### Method
GET/SET

### Endpoint
N/A (Method on Shape object)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **startPoint** (Object) - Required - The start point object to set.
  - **x** (Number) - Required - The x-coordinate of the start point.
  - **y** (Number) - Required - The y-coordinate of the start point.

### Request Example
```javascript
// Get stroke linear gradient start point
var startPoint = shape.strokeLinearGradientStartPoint();

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

### Response
#### Success Response (200)
- **startPoint** (Object) - The current stroke linear gradient start point.
  - **x** (Number) - The x-coordinate of the start point.
  - **y** (Number) - The y-coordinate of the start point.

#### Response Example
```json
{
  "x": 20,
  "y": 10
}
```
```