> For the complete documentation index, see [llms.txt](https://nswamy14.gitbook.io/i2djs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nswamy14.gitbook.io/i2djs/api-reference/layers.md).

# Layers

I2D supports **SVG**, **Canvas** & **WebGL** graphical rendering contexts. Below are the layer APIs, with a brief description, for all supported contexts.

### SVG Layer

```
   var SVGLayer = i2d.svgLayer('#containerId',SettingsObj);
```

svgLayer API returns rendering instance of SVG context. It accepts containerID as an input along with the config object. Please refer to the **settingsObj** object.

Refer to [Svg-API](https://nswamy14.gitbook.io/i2djs/api-reference/layers/svg-layer) for more Details.

### Canvas Layer

```
   var canvasLayer = i2d.CanvasLayer('#containerId', contextAttrObject, SettingsObj);
```

CanvasLayer API returns rendering instance of Canvas-2D context. It accepts multiple parameters as specified below.

* containerId - CSS ID selector which uniquely identifies the container in which the Canvas element will be rendered.
* contextAttrObject - Canvas context attributes, which will be passed to the getContext method.
* **SettingsObj** - Object with below settings.
  * **enableEvents** - Boolean - Flag to enable/disable events for the rendered layer. Default is **True**
  * **autoUpdate** - Boolean - To disable auto rendering of VDom changes to DOM. Used only in special cases to improve rendering performance. On disabling, one should invoke **layerInstance.update()** to manually render the changes to the DOM.

Refer [Canvas-API](https://nswamy14.gitbook.io/i2djs/api-reference/layers/canvas-layer) for more Details.

### WebGL Layer

```
   var webglLayer = i2d.WebglLayer('#containerId', contextAttrObject, SettingsObj)
```

WebglLayer API returns rendering instance of WebGL-2D context. It accepts arguments the same as CanvasLayer API, except for the below one.

* contextAttrObject - WebGL context attributes, which will be passed to the getContext method.
* **SettingsObj** - Object with below settings.
  * **enableEvents** - Boolean - Flag to enable/disable events for the rendered layer. Default is **False**
  * **autoUpdate** - Boolean - To disable auto rendering of VDom changes to DOM. Used only in special cases to improve rendering performance. On disabling, one should invoke **layerInstance.update()** to manually render the changes to the DOM.

Refer [Webgl-API](https://nswamy14.gitbook.io/i2djs/api-reference/layers/webgl-layer) for more Details.

\*\* **Multiple layers of different contexts can be combined to build composite scenes. Layers will be stacked in the order of creation.**

\*\* **For performance gain, I2D implements mini Virtual Dom. All the API interactions will be carried out on V-DOM, the changes will be reflected in the DOM in the respective FrameRefreshCycle. Virtual DOMs also help in batching the reads and writes.**


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nswamy14.gitbook.io/i2djs/api-reference/layers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.