# Canvas: Create-animate

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

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

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

### Layer Creation:

To create the Canvas layer, invoke **canvasLayer** method with ContainerID "#myCanvas", context config and Layer config objects as arguments. It returns the renderer instance. For more details on **canvasLayer** please refer: **API Reference -> Layers -> Canvas Layer** Page.&#x20;

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

### **Element Creation:**

**renderer.createEl()** API creates Element of type '**el**' with '**attr'** attributes and '**style'** properties. In the below example we are creating **Circle** with attributes specified in the **attr** object and styles in the **style** object.

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

To create multiple circles based on Data array - call **createEls(DataArray, ElementConfig)**

```
let circle = renderer.createEls([1,2,3,4], {
    el: 'circle',
    attr: {
        r: 50,
        cx: function (d) { return d * 100 },
        cy: function (d) { return d * 100 }
    },
    style: {
        fillStyle: '#ff0000'
    }
})
```

### Animation:

AnimateTo API is used for animating properties of the graphical elements. In the below code we are animating radius from 50 to 200 and fillStyle from '#ff0000' to '#00ff00' in duration - 500 ms. By specifying loop = 10, the animation will be repeated **10** times, with **alternate** direction and **easeInOutSin** easing.

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