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 creating the Canvas context using canvasLayer API. Below API creates the canvas element under "#myCanvas" html container.

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

canvasLayer API returns renderer instance, in this case Canvas renderer. 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'
    }
});