### Manage Paper and Elements in Raphaël

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Shows how to use paper methods for resizing, setting the viewbox, clearing, removing, and importing elements. Also includes examples of extending Raphaël with custom paper and element methods.

```javascript
var paper = Raphael("canvas", 500, 400);

// Resize paper
paper.setSize(800, 600);

// Get current size
var size = paper.getSize();
console.log(size);  // {width: 800, height: 600}

// Set viewBox for zoom/pan
paper.setViewBox(0, 0, 250, 200, true);  // Show 250x200 area, fit=true

// Clear all elements
paper.clear();

// Remove paper from DOM
paper.remove();

// Import elements from JSON
var elements = paper.add([
    {type: "circle", cx: 100, cy: 100, r: 50, fill: "#e74c3c"},
    {type: "rect", x: 200, y: 50, width: 100, height: 100, fill: "#3498db"},
    {type: "path", path: "M50,200 L150,300", stroke: "#2ecc71", "stroke-width": 3}
]);

// Extend Raphael with custom paper methods
Raphael.fn.arrow = function(x1, y1, x2, y2, size) {
    var angle = Raphael.angle(x2, y2, x1, y1);
    var path = this.path("M" + x1 + "," + y1 + "L" + x2 + "," + y2);
    path.attr({"arrow-end": "classic-wide-long"});
    return path;
};

var arrow = paper.arrow(50, 50, 200, 100);

// Extend Raphael with custom element methods
Raphael.el.red = function() {
    this.attr({fill: "#f00"});
    return this;
};

Raphael.st.red = function() {
    this.forEach(function(el) {
        el.red();
    });
    return this;
};

paper.circle(100, 100, 30).red();
```

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

### Bounding Box and Hit Testing

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Methods for getting element dimensions and testing point inclusion within Raphaël elements.

```APIDOC
## Bounding Box and Hit Testing

Methods for getting element dimensions and testing point inclusion.

### `rect.getBBox()`

**Description**: Gets the bounding box of an element, including transformations.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Method on element object)

**Parameters**: None

**Request Example**: None

**Response**: An object containing `x`, `y`, `x2`, `y2`, `width`, and `height` of the bounding box.

**Response Example**: 
```json
{
  "x": 85.6,
  "y": 58.4,
  "x2": 285.6,
  "y2": 221.6,
  "width": 200,
  "height": 163.2
}
```

### `rect.getBBox(true)`

**Description**: Gets the bounding box of an element without considering transformations.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Method on element object)

**Parameters**: 
- `true` (boolean) - If true, ignores transformations.

**Request Example**: None

**Response**: An object containing `x`, `y`, `x2`, `y2`, `width`, and `height` of the original bounding box.

**Response Example**: 
```json
{
  "x": 100,
  "y": 100,
  "x2": 250,
  "y2": 180,
  "width": 150,
  "height": 80
}
```

### `rect.isPointInside(x, y)`

**Description**: Checks if a given point (x, y) is inside the element.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Method on element object)

**Parameters**: 
- **x** (number) - The x-coordinate of the point.
- **y** (number) - The y-coordinate of the point.

**Request Example**: None

**Response**: `true` if the point is inside, `false` otherwise.

**Response Example**: `true` or `false`

### `paper.getElementByPoint(x, y)`

**Description**: Gets the topmost element at a specific point.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Method on paper object)

**Parameters**: 
- **x** (number) - The x-coordinate of the point.
- **y** (number) - The y-coordinate of the point.

**Request Example**: None

**Response**: The Raphaël element at the specified point, or `null` if no element is found.

**Response Example**: An element object or `null`.

### `paper.getElementsByPoint(x, y)`

**Description**: Gets all elements at a specific point, ordered from top to bottom.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Method on paper object)

**Parameters**: 
- **x** (number) - The x-coordinate of the point.
- **y** (number) - The y-coordinate of the point.

**Request Example**: None

**Response**: An array of Raphaël elements at the specified point.

**Response Example**: `[element1, element2, ...]`

### `paper.getElementsByBBox(bbox)`

**Description**: Gets all elements that intersect with a given bounding box.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Method on paper object)

**Parameters**: 
- **bbox** (object) - An object with `x`, `y`, `x2`, `y2` properties defining the bounding box.

**Request Example**: 
```json
{
  "x": 100,
  "y": 100,
  "x2": 300,
  "y2": 200
}
```

**Response**: An array of Raphaël elements that intersect with the bounding box.

**Response Example**: `[element1, element2, ...]`

### `paper.forEach(callback)`

**Description**: Iterates over all elements in the paper.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Method on paper object)

**Parameters**: 
- **callback** (function) - A function to execute for each element. It receives the element as an argument.

**Request Example**: None

**Response**: None

**Response Example**: None

### `paper.getById(id)`

**Description**: Retrieves an element by its unique ID.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Method on paper object)

**Parameters**: 
- **id** (string or number) - The ID of the element to retrieve.

**Request Example**: None

**Response**: The Raphaël element with the specified ID, or `null` if not found.

**Response Example**: An element object or `null`.
```

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

### Clone and Transform a Set

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Create a copy of a set using `set.clone()`. The cloned set can then be independently transformed, for example, by translating it using `transform("t200,0")`.

```javascript
var clonedSet = set.clone();
clonedSet.transform("t200,0");
```

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

### Get Set Bounding Box

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

The `set.getBBox()` method returns the bounding box of all elements within the set, providing their collective `x`, `y`, `width`, `height`, `x2`, and `y2` coordinates.

```javascript
var bbox = set.getBBox();
console.log(bbox);  // {x, y, width, height, x2, y2}
```

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

### Get Multiple Element Attributes

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Fetch the values of multiple attributes by passing an array of attribute names to `element.attr()`. The result is an object containing the requested attributes.

```javascript
// Get multiple attributes
var attrs = circle.attr(["fill", "stroke", "opacity"]);
console.log(attrs);  // {fill: "#e74c3c", stroke: "#c0392b", opacity: 0.9}
```

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

### Path Intersection and Bounding Box in Raphaël

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Find intersections between paths using `pathIntersection()`, check if a point is inside a path with `isPointInsidePath()`, and get a path's bounding box with `pathBBox()`.

```javascript
// Path intersections
var intersections = Raphael.pathIntersection(path1, path2);
var isInside = Raphael.isPointInsidePath(path, x, y);
var bbox = Raphael.pathBBox(path);
```

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

### Get All Element Attributes

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Retrieve all current attributes of an element by calling `element.attr()` without any arguments. This returns an object containing all attribute-value pairs.

```javascript
// Get all attributes
var allAttrs = circle.attr();
```

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

### Get Element Bounding Box in Raphaël

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Use `getBBox()` to retrieve the bounding box of an element, optionally including transformations. The `true` argument excludes transformations.

```javascript
var paper = Raphael("canvas", 500, 400);
var rect = paper.rect(100, 100, 150, 80).attr({fill: "#3498db"});
rect.transform("r30");

// Get bounding box (includes transformations)
var bbox = rect.getBBox();
console.log(bbox);
// {x: 85.6, y: 58.4, x2: 285.6, y2: 221.6, width: 200, height: 163.2}

// Get bounding box without transformations
var bboxOriginal = rect.getBBox(true);
console.log(bboxOriginal);
// {x: 100, y: 100, x2: 250, y2: 180, width: 150, height: 80}
```

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

### Load Raphaël with AMD

Source: https://github.com/dmitrybaranovskiy/raphael/blob/master/README.md

Demonstrates how to load Raphaël using an AMD module loader. Ensure the correct path to the Raphaël library is specified.

```javascript
define([ "path/to/raphael" ], function( Raphael ) {
  console.log( Raphael );
});
```

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

### Get Single Element Attribute

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Retrieve the current value of a specific attribute from an element by passing the attribute name as a string to `element.attr()`.

```javascript
// Get single attribute
var currentFill = circle.attr("fill");
console.log(currentFill);  // "#e74c3c"
```

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

### Initialize Raphael and Draw Circle

Source: https://github.com/dmitrybaranovskiy/raphael/blob/master/dev/raphaelTest.html

Use this snippet to initialize Raphael with a container ID, dimensions, and draw a circle with a gradient fill. Ensure the script runs after the DOM is loaded.

```javascript
window.onload = function () {
  require(['../raphael'], function(Raphael) {
    var paper = Raphael("container", 640, 720);
    paper.circle(100, 100, 100).attr({'fill':'270-#FAE56B:0-#E56B6B:100'}); //example
  });
};
```

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

### Automatic Set Creation

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Use `paper.setStart()` and `paper.setFinish()` to automatically group subsequently created elements into a set. This is useful for creating sets of elements without explicitly pushing them.

```javascript
paper.setStart();
paper.rect(50, 200, 80, 50).attr({fill: "#9b59b6"});
paper.rect(150, 200, 80, 50).attr({fill: "#9b59b6"});
paper.rect(250, 200, 80, 50).attr({fill: "#9b59b6"});
var autoSet = paper.setFinish();
autoSet.attr({opacity: 0.8});
```

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

### Implement Basic Drag and Drop

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Use the `element.drag()` method to enable drag functionality. Provide onStart, onMove, and onEnd callbacks to define behavior during the drag operation. The onMove callback receives `dx`, `dy`, `x`, and `y` coordinates, and the onEnd callback receives the event object.

```javascript
var paper = Raphael("canvas", 500, 400);
var rect = paper.rect(100, 100, 80, 60).attr({
    fill: "#e74c3c",
    cursor: "move"
});

// Basic drag
rect.drag(
    function(dx, dy, x, y, event) {  // onMove
        this.attr({
            x: this.ox + dx,
            y: this.oy + dy
        });
    },
    function(x, y, event) {  // onStart
        this.ox = this.attr("x");
        this.oy = this.attr("y");
        this.attr({opacity: 0.7});
    },
    function(event) {  // onEnd
        this.attr({opacity: 1});
        console.log("Dropped at", this.attr("x"), this.attr("y"));
    }
);
```

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

### Utility Methods

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Raphaël provides various helper functions for color manipulation, math, and path operations.

```APIDOC
## Utility Methods

Raphaël provides various helper functions for color manipulation, math, and path operations.

### `Raphael.is(obj, type)`

**Description**: Checks if an object is of a specific type.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **obj** (any) - The object to check.
- **type** (string) - The type to check against (e.g., "string", "array", "object", "function", "finite").

**Request Example**: None

**Response**: `true` if the object matches the type, `false` otherwise.

**Response Example**: `true` or `false`

### `Raphael.getRGB(color)`

**Description**: Parses a color string and returns its RGB representation.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **color** (string) - The color string (e.g., "#ff5733", "red", "rgb(255,0,0)", "hsb(0.5, 1, 1)").

**Request Example**: None

**Response**: An object with `r`, `g`, `b`, and `hex` properties.

**Response Example**: 
```json
{
  "r": 255,
  "g": 87,
  "b": 51,
  "hex": "#ff5733"
}
```

### `Raphael.rgb(r, g, b)`

**Description**: Converts RGB values to a hex color string.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **r** (number) - Red component (0-255).
- **g** (number) - Green component (0-255).
- **b** (number) - Blue component (0-255).

**Request Example**: None

**Response**: A hex color string.

**Response Example**: `"#ff5733"`

### `Raphael.hsb(h, s, b)`

**Description**: Converts HSB values to a hex color string.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **h** (number) - Hue component (0-1).
- **s** (number) - Saturation component (0-1).
- **b** (number) - Brightness component (0-1).

**Request Example**: None

**Response**: A hex color string.

**Response Example**: `"#ff5733"`

### `Raphael.hsl(h, s, l)`

**Description**: Converts HSL values to a hex color string.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **h** (number) - Hue component (0-1).
- **s** (number) - Saturation component (0-1).
- **l** (number) - Lightness component (0-1).

**Request Example**: None

**Response**: A hex color string.

**Response Example**: `"#ff5733"`

### `Raphael.rgb2hsb(r, g, b)`

**Description**: Converts RGB values to HSB.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **r** (number) - Red component (0-255).
- **g** (number) - Green component (0-255).
- **b** (number) - Blue component (0-255).

**Request Example**: None

**Response**: An object with `h`, `s`, `b` properties.

**Response Example**: `{"h": 0.5, "s": 1, "b": 1}`

### `Raphael.rgb2hsl(r, g, b)`

**Description**: Converts RGB values to HSL.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **r** (number) - Red component (0-255).
- **g** (number) - Green component (0-255).
- **b** (number) - Blue component (0-255).

**Request Example**: None

**Response**: An object with `h`, `s`, `l` properties.

**Response Example**: `{"h": 0.5, "s": 1, "l": 0.5}`

### `Raphael.color(color)`

**Description**: Parses a color string and returns a complete color object.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **color** (string) - The color string.

**Request Example**: None

**Response**: A comprehensive color object.

**Response Example**: `{"r": 255, "g": 87, "b": 51, "hex": "#ff5733", "h": 0.5, "s": 1, "l": 0.5}`

### `Raphael.getColor([brightness])`

**Description**: Returns the next color in the spectrum. Can optionally specify brightness.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **brightness** (number, optional) - Custom brightness value (0-1).

**Request Example**: None

**Response**: A hex color string.

**Response Example**: `"#ff5733"`

### `Raphael.getColor.reset()`

**Description**: Resets the color spectrum to the beginning.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: None

**Request Example**: None

**Response**: None

**Response Example**: None

### `Raphael.rad(degrees)`

**Description**: Converts degrees to radians.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **degrees** (number) - Angle in degrees.

**Request Example**: None

**Response**: Angle in radians.

**Response Example**: `0.5235987755982988` (for 30 degrees)

### `Raphael.deg(radians)`

**Description**: Converts radians to degrees.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **radians** (number) - Angle in radians.

**Request Example**: None

**Response**: Angle in degrees.

**Response Example**: `180` (for Math.PI)

### `Raphael.angle(x1, y1, x2, y2)`

**Description**: Calculates the angle between two points.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **x1** (number) - x-coordinate of the first point.
- **y1** (number) - y-coordinate of the first point.
- **x2** (number) - x-coordinate of the second point.
- **y2** (number) - y-coordinate of the second point.

**Request Example**: None

**Response**: The angle in degrees.

**Response Example**: `45`

### `Raphael.snapTo(grid, value, [threshold])`

**Description**: Snaps a value to the nearest point in a grid.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **grid** (array) - An array of snap points.
- **value** (number) - The value to snap.
- **threshold** (number, optional) - The snapping threshold.

**Request Example**: None

**Response**: The snapped value.

**Response Example**: `50`

### `Raphael.createUUID()`

**Description**: Generates a universally unique identifier (UUID).

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: None

**Request Example**: None

**Response**: A UUID string.

**Response Example**: `"a1b2c3d4-e5f6-7890-1234-567890abcdef"`

### `Raphael.getTotalLength(path)`

**Description**: Calculates the total length of a path string.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **path** (string) - The SVG path string.

**Request Example**: None

**Response**: The total length of the path.

**Response Example**: `141.42`

### `Raphael.getPointAtLength(path, length)`

**Description**: Gets the coordinates of a point at a specific distance along a path.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **path** (string) - The SVG path string.
- **length** (number) - The distance along the path.

**Request Example**: None

**Response**: An object with `x`, `y`, and `alpha` properties.

**Response Example**: 
```json
{
  "x": 35.4,
  "y": 35.4,
  "alpha": 45
}
```

### `Raphael.getSubpath(path, from, to)`

**Description**: Extracts a subpath from a given path string.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **path** (string) - The SVG path string.
- **from** (number) - The starting distance along the path.
- **to** (number) - The ending distance along the path.

**Request Example**: None

**Response**: The extracted subpath string.

**Response Example**: `"M0,0 L50,50"`

### `Raphael.parsePathString(path)`

**Description**: Parses an SVG path string into an array of commands and parameters.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **path** (string) - The SVG path string.

**Request Example**: None

**Response**: An array representing the parsed path.

**Response Example**: `[["M", 0, 0], ["L", 100, 100]]`

### `Raphael.path2curve(path)`

**Description**: Converts an SVG path string to a curve string.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **path** (string) - The SVG path string.

**Request Example**: None

**Response**: The path string converted to curves.

**Response Example**: `"M 0 0 C 0 0 100 100 100 100"`

### `Raphael.pathIntersection(path1, path2)`

**Description**: Finds the intersection points between two paths.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **path1** (string) - The first SVG path string.
- **path2** (string) - The second SVG path string.

**Request Example**: None

**Response**: An array of intersection points.

**Response Example**: `[{"x": 50, "y": 50}]`

### `Raphael.isPointInsidePath(path, x, y)`

**Description**: Checks if a point is inside a given path.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **path** (string) - The SVG path string.
- **x** (number) - The x-coordinate of the point.
- **y** (number) - The y-coordinate of the point.

**Request Example**: None

**Response**: `true` if the point is inside the path, `false` otherwise.

**Response Example**: `true` or `false`

### `Raphael.pathBBox(path)`

**Description**: Calculates the bounding box of an SVG path.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **path** (string) - The SVG path string.

**Request Example**: None

**Response**: An object with `x`, `y`, `x2`, `y2`, `width`, and `height` properties.

**Response Example**: 
```json
{
  "x": 0,
  "y": 0,
  "x2": 100,
  "y2": 100,
  "width": 100,
  "height": 100
}
```

### `Raphael.matrix(a, b, c, d, e, f)`

**Description**: Creates a transformation matrix.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **a, b, c, d, e, f** (numbers) - Matrix components.

**Request Example**: None

**Response**: A matrix object.

**Response Example**: `{"a": 1, "b": 0, "c": 0, "d": 1, "e": 100, "f": 50}`

### `Raphael.transformPath(path, matrix)`

**Description**: Applies a transformation matrix to a path.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **path** (string) - The SVG path string.
- **matrix** (string or object) - The transformation matrix.

**Request Example**: None

**Response**: The transformed path string.

**Response Example**: `"M100,50L200,150"`

### `Raphael.format(string, ...args)`

**Description**: Formats a string using positional arguments.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **string** (string) - The format string with placeholders like `{0}`, `{1}`.
- **args** (any) - Arguments to fill the placeholders.

**Request Example**: None

**Response**: The formatted string.

**Response Example**: `"M10,20L100,200"`

### `Raphael.fullfill(string, object)`

**Description**: Formats a string using object properties.

**Method**: `GET` (conceptual)

**Endpoint**: N/A (Static method)

**Parameters**: 
- **string** (string) - The format string with placeholders like `{x}`, `{end.y}`.
- **object** (object) - An object containing the data for the placeholders.

**Request Example**: None

**Response**: The formatted string.

**Response Example**: `"M10,20L100,200"`
```

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

### Control Element Stacking Order (Z-order)

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Manage the visual layering of elements using `toFront()`, `toBack()`, `insertAfter()`, and `insertBefore()`. `toFront()` moves an element to the top of the stack, while `toBack()` moves it to the bottom.

```javascript
var paper = Raphael("canvas", 400, 300);

var red = paper.circle(150, 150, 60).attr({fill: "#e74c3c"});
var blue = paper.circle(180, 150, 60).attr({fill: "#3498db"});
var green = paper.circle(210, 150, 60).attr({fill: "#2ecc71"});

// Move to front (top of stack)
red.toFront();

// Move to back (bottom of stack)
green.toBack();

// Insert after specific element
red.insertAfter(blue);

// Insert before specific element
green.insertBefore(blue);
```

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

### Initialize Raphael Test Suite

Source: https://github.com/dmitrybaranovskiy/raphael/blob/master/dev/test/index.html

This script dynamically loads test files for the Raphael Test Suite. It determines the type of Raphael (e.g., 'svg', 'vml') and appends script tags to the document body to load the corresponding test files.

```javascript
(function() { var tests = [ "dom" ]; var typeFolder = Raphael.type.toLowerCase(); for (var i = 0; i < tests.length; i++) { var s = document.createElement('script'); s.type = "text/javascript"; s.src = typeFolder + "/" + tests[i] + ".js"; document.body.appendChild(s); } })();
```

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

### Create Simple Line Path

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Use `paper.path()` with SVG path data to draw a simple line. Ensure a Raphaël canvas is initialized first.

```javascript
var paper = Raphael("canvas", 500, 400);

// Simple line from (10, 10) to (100, 100)
var line = paper.path("M10,10 L100,100");
```

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

### New Raphael Methods

Source: https://github.com/dmitrybaranovskiy/raphael/blob/master/history.md

Documentation for newly added utility methods to the Raphael object.

```APIDOC
## New Raphael Methods

### Description
New utility methods have been added to the global `Raphael` object for various purposes, including color manipulation and transformation parsing.

### Methods
- **Raphael.fullfill(path, x, y, width, height)**: Fills a path with specified parameters.
- **Raphael.matrix(a, b, c, d, e, f)**: Creates a new matrix.
- **Raphael.parseTransformString(transformstring)**: Parses a transformation string.

### See Also
- [Raphael.fullfill documentation](http://raphaeljs.com/reference.html#Raphael.fullfill)
- [Raphael.matrix documentation](http://raphaeljs.com/reference.html#Raphael.matrix)
- [Raphael.parseTransformString documentation](http://raphaeljs.com/reference.html#Raphael.parseTransformString)
```

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

### Create a Raphael Paper (Canvas)

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Initialize a drawing surface (paper) for Raphaël elements. Can be attached to a DOM element by ID or reference, or positioned absolutely. A callback can be used to execute code when the DOM is ready.

```javascript
var paper = Raphael("notepad", 320, 200);
```

```javascript
var container = document.getElementById("canvas-container");
var paper = Raphael(container, 640, 480);
```

```javascript
var paper = Raphael(10, 50, 320, 200);
```

```javascript
var paper = Raphael(["notepad", 320, 200, {
    type: "rect",
    x: 10,
    y: 10,
    width: 25,
    height: 25,
    stroke: "#f00"
}, {
    type: "text",
    x: 30,
    y: 40,
    text: "Hello Raphaël"
}]);
```

```javascript
Raphael(function() {
    var paper = Raphael("container", 500, 500);
    paper.circle(250, 250, 100).attr({fill: "red"});
});
```

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

### New Set Methods

Source: https://github.com/dmitrybaranovskiy/raphael/blob/master/history.md

Documentation for newly added methods to the Set object in Raphaël.

```APIDOC
## New Set Methods

### Description
New methods have been added to the `Set` object to improve management and manipulation of element collections.

### Methods
- **Set.clear()**: Removes all elements from the set.
- **Set.exclude(element)**: Removes a specific element from the set.
- **Set.forEach()**: Iterates over elements in the set.
- **Set.splice(index, length, element1, ..., elementN)**: Adds/removes elements from the set.

### See Also
- [Set.clear documentation](http://raphaeljs.com/reference.html#Set.clear)
- [Set.exclude documentation](http://raphaeljs.com/reference.html#Set.exclude)
- [Set.forEach documentation](http://raphaeljs.com/reference.html#Set.forEach)
- [Set.splice documentation](http://raphaeljs.com/reference.html#Set.splice)
```

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

### String Formatting with Raphaël

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Format strings using placeholders with `Raphael.format()` for simple substitution and `Raphael.fullfill()` for nested object properties.

```javascript
// String formatting
var str = Raphael.format("M{0},{1}L{2},{3}", 10, 20, 100, 200);
// "M10,20L100,200"

var str2 = Raphael.fullfill("M{x},{y}L{end.x},{end.y}", {
    x: 10, y: 20, end: {x: 100, y: 200}
});
```

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

### Matrix Transformations in Raphaël

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Create transformation matrices using `Raphael.matrix()` and apply transformations to paths with `Raphael.transformPath()`.

```javascript
// Transform utilities
var matrix = Raphael.matrix(1, 0, 0, 1, 100, 50);
var transformedPath = Raphael.transformPath(path, "r45t100,0");
```

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

### Implement Drag for Circles

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Drag functionality for circular elements uses `cx` and `cy` attributes instead of `x` and `y`. The onStart callback should store the initial `cx` and `cy` values.

```javascript
var draggableCircle = paper.circle(350, 150, 30).attr({fill: "#2ecc71", cursor: "move"});

draggableCircle.drag(
    function(dx, dy) {
        this.attr({cx: this.ox + dx, cy: this.oy + dy});
    },
    function() {
        this.ox = this.attr("cx");
        this.oy = this.attr("cy");
    }
);
```

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

### Draw Quadratic Bezier Curve

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Create a quadratic Bezier curve using the 'Q' command in SVG path data. Customize stroke and fill properties.

```javascript
var curve = paper.path("M10,200 Q100,100 200,200").attr({
    stroke: "#3498db",
    "stroke-width": 3,
    fill: "none"
});
```

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

### Create and Manipulate Element Sets

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Use `paper.set()` to create a collection of elements that can be treated as a single unit. Elements can be added using `set.push()`, and attributes or animations can be applied to all elements in the set simultaneously.

```javascript
var paper = Raphael("canvas", 500, 400);

// Create a set
var set = paper.set();

// Add elements to set
set.push(
    paper.circle(100, 100, 30).attr({fill: "#e74c3c"}),
    paper.circle(150, 100, 30).attr({fill: "#3498db"}),
    paper.circle(200, 100, 30).attr({fill: "#2ecc71"})
);

// Apply attributes to all elements in set
set.attr({stroke: "#2c3e50", "stroke-width": 2});

// Animate all elements in set
set.animate({transform: "t0,100"}, 1000);
```

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

### New Element Methods

Source: https://github.com/dmitrybaranovskiy/raphael/blob/master/history.md

Documentation for newly added methods to the Element object in Raphaël.

```APIDOC
## New Element Methods

### Description
New methods have been added to the `Element` object to provide additional functionality for manipulating and interacting with graphical elements.

### Methods
- **Element.data(key, value)**: Sets or retrieves data associated with an element.
- **Element.glow()**: Applies a glow effect to an element.
- **Element.onDragOver()**: Sets a callback for drag over events.
- **Element.removeData(key)**: Removes data associated with an element.

### See Also
- [Element.data documentation](http://raphaeljs.com/reference.html#Element.data)
- [Element.glow documentation](http://raphaeljs.com/reference.html#Element.glow)
- [Element.onDragOver documentation](http://raphaeljs.com/reference.html#Element.onDragOver)
- [Element.removeData documentation](http://raphaeljs.com/reference.html#Element.removeData)
```

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

### New Paper Methods

Source: https://github.com/dmitrybaranovskiy/raphael/blob/master/history.md

Documentation for newly added methods to the Paper object in Raphaël.

```APIDOC
## New Paper Methods

### Description
Several new methods have been added to the `Paper` object for enhanced canvas manipulation and element retrieval.

### Methods
- **Paper.setViewBox()**: Sets the view box of the paper.
- **Paper.setStart()**: Starts a new set.
- **Paper.setFinish()**: Finishes the current set.
- **Paper.forEach()**: Iterates over elements in the paper.
- **Paper.getById()**: Retrieves an element by its ID.
- **Paper.getElementByPoint()**: Retrieves an element at a specific point.

### See Also
- [Paper.setViewBox documentation](http://raphaeljs.com/reference.html#Paper.setViewBox)
- [Paper.setStart documentation](http://raphaeljs.com/reference.html#Paper.setStart)
- [Paper.setFinish documentation](http://raphaeljs.com/reference.html#Paper.setFinish)
- [Paper.forEach documentation](http://raphaeljs.com/reference.html#Paper.forEach)
- [Paper.getById documentation](http://raphaeljs.com/reference.html#Paper.getById)
- [Paper.getElementByPoint documentation](http://raphaeljs.com/reference.html#Paper.getElementByPoint)
```

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

### Access Next and Previous Elements

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Retrieve the element directly above or below a given element in the stacking order using the `next` and `prev` properties. These properties return `null` if there is no next or previous element.

```javascript
// Get next/previous elements in hierarchy
var nextElement = blue.next;
var prevElement = blue.prev;

// Paper's top and bottom elements
console.log(paper.top);    // Topmost element
console.log(paper.bottom); // Bottommost element
```

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

### Create Clickable Text Link

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Make text elements clickable links by setting the `href` and `target` attributes. A `cursor: pointer` style is recommended for user feedback.

```javascript
var linkText = paper.text(250, 350, "Click Me").attr({
    "font-size": 20,
    fill: "#3498db",
    cursor: "pointer",
    href: "https://raphaeljs.com",
    target: "_blank"
});
```

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

### Create Complex Star Shape

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Assemble a complex shape like a star by chaining multiple path commands. The `join(' ')` method is used to create the path string from an array.

```javascript
var star = paper.path([
    "M", 250, 50,
    "L", 270, 100,
    "L", 325, 100,
    "L", 280, 130,
    "L", 300, 180,
    "L", 250, 150,
    "L", 200, 180,
    "L", 220, 130,
    "L", 175, 100,
    "L", 230, 100,
    "Z"
].join(" ")).attr({
    fill: "#f1c40f",
    stroke: "#f39c12",
    "stroke-width": 2
});
```

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

### Embed Clickable Image

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Make an image clickable by attaching a `click` event handler. This allows for user interaction with the embedded image.

```javascript
var clickableImg = paper.image("button.png", 10, 200, 150, 50);
clickableImg.click(function() {
    alert("Image clicked!");
});
```

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

### Render Basic Text

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Display simple text on the canvas using `paper.text()` at specified coordinates. The text content is provided as the third argument.

```javascript
var paper = Raphael("canvas", 500, 400);

// Basic text
var text = paper.text(250, 50, "Hello Raphaël!");
```

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

### Define and Animate Custom Attributes in Raphaël

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Demonstrates how to define custom attributes like 'hue' and 'hsb' for elements and animate them. Also shows a custom 'arc' attribute for creating pie chart segments.

```javascript
var paper = Raphael("canvas", 500, 400);

// Define custom attribute "hue"
paper.customAttributes.hue = function(num) {
    num = num % 1;
    return {fill: "hsb(" + num + ", 0.75, 1)"};
};

var circle = paper.circle(250, 200, 50);
circle.attr({hue: 0.5});

// Animate custom attribute
circle.animate({hue: 1}, 2000);

// Multi-parameter custom attribute
paper.customAttributes.hsb = function(h, s, b) {
    return {fill: "hsb(" + [h, s, b].join(",") + ")"};
};

circle.attr({hsb: [0.5, 0.8, 1]});
circle.animate({hsb: [1, 0, 0.5]}, 1000);

// Custom attribute for pie slices
paper.customAttributes.arc = function(value, total, radius) {
    var angle = 360 / total * value,
        x = 250, y = 200,
        rad = Math.PI / 180,
        x1 = x + radius * Math.cos(-90 * rad),
        y1 = y + radius * Math.sin(-90 * rad),
        x2 = x + radius * Math.cos((-90 + angle) * rad),
        y2 = y + radius * Math.sin((-90 + angle) * rad);

    return {
        path: [
            ["M", x, y],
            ["L", x1, y1],
            ["A", radius, radius, 0, +(angle > 180), 1, x2, y2],
            ["Z"]
        ]
    };
};

var arc = paper.path().attr({
    arc: [75, 100, 80],
    fill: "#3498db"
});

arc.animate({arc: [100, 100, 80]}, 1000);
```

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

### Angle and Snap-to-Grid Utilities in Raphaël

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Convert between degrees and radians using `rad()` and `deg()`. Calculate the angle between two points with `angle()`. Snap a value to a grid with `snapTo()`.

```javascript
// Angle functions
var rad = Raphael.rad(180);               // Degrees to radians
var deg = Raphael.deg(Math.PI);           // Radians to degrees
var angle = Raphael.angle(x1, y1, x2, y2); // Angle between points

// Snap to grid
var snapped = Raphael.snapTo([0, 50, 100], 47, 10);  // Returns 50
```

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

### Draw Triangle with Path

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Construct a triangle by defining its vertices using SVG path commands. Attributes like fill and stroke can be applied.

```javascript
var triangle = paper.path("M150,10 L200,100 L100,100 Z").attr({
    fill: "#e74c3c",
    stroke: "#c0392b",
    "stroke-width": 2
});
```

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

### Set Event Handling

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Event handlers like `click`, `hover`, and `drag` can be applied directly to a set, and they will be invoked on each element within the set. This allows for collective event management.

```javascript
set.click(function() {
    this.attr({fill: Raphael.getColor()});
});

set.hover(
    function() { this.animate({transform: "s1.2"}, 200); },
    function() { this.animate({transform: "s1"}, 200); }
);

// Make set draggable
set.drag(
    function(dx, dy) {
        this.transform("t" + dx + "," + dy);
    },
    function() {}, // onStart
    function() {}  // onEnd
);
```

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

### Apply Gradient Fills

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Set gradient fills for elements by providing specific string formats to the `fill` attribute. Supports linear and radial gradients with customizable colors and stops.

```javascript
// Gradient fills
circle.attr({fill: "90-#fff-#000"});      // Linear gradient
circle.attr({fill: "r#fff-#000"});        // Radial gradient
circle.attr({fill: "r(0.25, 0.75)#fff-#f00:50-#000"});  // Complex radial
```

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

### Draw a Basic Rectangle in Raphael

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Creates a basic rectangle at specified coordinates with given dimensions.

```javascript
var paper = Raphael("canvas", 500, 400);

// Basic rectangle at (10, 10) with width 100 and height 50
var rect = paper.rect(10, 10, 100, 50);
```

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

### Implement Drag with Bounds Checking

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Constrain element dragging within specified boundaries by calculating new positions in the onMove callback. Ensure the element stays within the canvas limits by using `Math.max` and `Math.min`.

```javascript
var boundedRect = paper.rect(200, 200, 60, 40).attr({fill: "#3498db", cursor: "move"});
var bounds = {x: 0, y: 0, width: 500, height: 400};

boundedRect.drag(
    function(dx, dy) {
        var newX = Math.max(bounds.x, Math.min(this.ox + dx, bounds.width - 60));
        var newY = Math.max(bounds.y, Math.min(this.oy + dy, bounds.height - 40));
        this.attr({x: newX, y: newY});
    },
    function() {
        this.ox = this.attr("x");
        this.oy = this.attr("y");
    }
);
```

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

### Render Text with Stroke (Outline)

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Achieve an outline effect for text by setting `fill` to `none` and applying a `stroke` color and `stroke-width`.

```javascript
var outlineText = paper.text(250, 280, "OUTLINE").attr({
    "font-size": 48,
    "font-weight": "bold",
    fill: "none",
    stroke: "#e74c3c",
    "stroke-width": 2
});
```

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

### Draw a Basic Circle in Raphael

Source: https://context7.com/dmitrybaranovskiy/raphael/llms.txt

Draws a circle at specified coordinates with a given radius. Returns an Element object that can be styled and animated.

```javascript
var paper = Raphael("canvas", 400, 400);

// Draw a basic circle at center (200, 200) with radius 50
var circle = paper.circle(200, 200, 50);
```