Quick Start

Get started with I2Djs to create rich, blazing fast visualisations.

Integrate source code as specified on the installation page.

HTML container:

Create an HTML container with ID to render the graphical context element.

Example: div as mentioned below

<div id="myCanvas"> </div>

Layer Creation:

I2Djs provides API's for SVG, Canvas, and WebGL rendering contexts. In this example, we will be using the Canvas context. Once Dom is ready, call the below layer API to create the Canvas layer.

let renderer = i2d.canvasLayer('#myCanvas', {}, {});

canvasLayer API returns Canvas-2D renderer instance. It accepts parameters - containerId, contextAttrObject and layerSettingsObject. For more details on layer API, refer to API Reference > Layers

Element Creation:

Using renderer instance we will create a circle. createEl API is used to create the Element of type 'Circle' with attributes and style properties as specified below.

let circle = renderer.createEl({
    el: 'circle',
    attr: {
        r: 50,
        cx: renderer.width / 2,
        cy: renderer.height / 2
    },
    style: {
        fillStyle: '#ff0000'
    }
})

Animation:

To animate circle properties we use animateTo API. In the below example radius and fillStyle are being animated for 500 milliseconds.

circle.animateTo({
    duration: 500,
    ease: 'easeInOutSin',
    attr: {
        r: 200
    },
    style: {
        fillStyle: '#00ff00'
    }
});