# 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.**