# Canvas: Textures & Sprite animation

A **sprite sheet** is a simple bitmap or block images to a more sophisticated animated image as shown in the example below. Sprites often help in improving the performance of the application in many ways. I2djs provides a set of texture APIs to handle sprites efficiently and easily.

![Sprite](https://1744600414-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6CmxFRSBqCTeXXdoA%2F-M0xUeQKxE0jz-13k4vP%2F-M0xcj6dE-89uKD6XDrs%2FboySprite.png?alt=media\&token=ab8d5ad3-df04-412f-a3f1-31b6377db4ba)

The below example explains the sprite animation in detail:

### Layer Creation: 

**canvasLayer** method invoked with ContainerID "#myCanvas". It returns the Canvas2D renderer instance.

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

### Texture creation.

Create texture instance using **canvasLayer** API - **createTexture** as shown below.  In the below example we are creating a texture of size 100 \* 100. and the **Clip** property of the **createTexture** gives details of the image block on the sprite image. This will help the renderer in extracting the exact pixel block from the sprite. 

**Clip: { sx: 0, sy: 0, swidth: 108, sheight: 140}** 

**- sx** - sprite **x** start pixel position, **sy** -sprite **y** start pixel position, **swidth** - sprite width pixels, **sheight** - sprite height pixel.

```
let textureInstance = renderer_.createTexture({
                attr: {
                    src: "../images/boySprite.png",
                    width: 100,
                    height: 100,
                    clip: {
                        sx: 0,
                        sy: 0,
                        swidth: 108,
                        sheight: 140,
                    },
                    onload: function () {},
                    onerror: function () {}
                },
            });
```

### Image Element creation.

Create an image element with TextureInstance as the source and set the height, width, x, and y for the image element.

```
var img = renderer_.createEl({
	el: 'image',
	attr: {
		src: textureInstance,
		width: 100,
		height: 100,
		x: 300,
		y: 0
	}
});
```

The result will be : 

![](https://1744600414-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6CmxFRSBqCTeXXdoA%2F-M0xUeQKxE0jz-13k4vP%2F-M0xgpWOLScgMFDFX-14%2FScreenshot%202020-02-26%20at%2012.23.48%20AM.png?alt=media\&token=5849043e-4da7-4b48-8014-573d8d6baf92)

### Animation: 

we need to animate the clip property of the texture instance to create the sprite animations. Move the **sx** and **sy** properties of the **clip** property continuously based on the animation time factor **f** to create the below animation.

```
textureInstance.animateTo({
		duration: 1000,
		loop: 6,
		attr: {
			clip: function (f) {
				if (f == 1)
					return { sx: 7 * 108, sy: 0, swidth: 108, sheight: 140 };
				else
					return { sx: parseInt((f * 10) * (8 / 10)) * 108, sy: 0, swidth: 108, sheight: 140 };
			}
		}
	});
```

![](https://1744600414-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6CmxFRSBqCTeXXdoA%2F-M0xjAaQIl7taeiGY5km%2F-M0zw9PzlMyh2CbO8gOE%2FimageAnimation.gif?alt=media\&token=638d0941-586a-46d5-be60-75e6d2cca36a)