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

# Quick Start

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

{% embed url="https://codepen.io/nswamy14/pen/BVxjog" %}

### 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**&#x20;

### **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'
    }
});
```
