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

PreviousAPI ReferenceNextCanvas Layer