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