> For the complete documentation index, see [llms.txt](https://nswamy14.gitbook.io/i2djs-v5/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nswamy14.gitbook.io/i2djs-v5/tutorial-point/canvas-sprite.md).

# Canvas: Textures & Sprite animation

Sprites

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://content.gitbook.com/content/j4uz3UmYRheI1Pe6xix8/blobs/VkIIfxksWyob64JNzfye/boySprite.png)

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://content.gitbook.com/content/j4uz3UmYRheI1Pe6xix8/blobs/K6HCry5IN3EaMNvNejUX/Screenshot%202020-02-26%20at%2012.23.48%20AM.png)

### 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://content.gitbook.com/content/j4uz3UmYRheI1Pe6xix8/blobs/0iTk1e7YxMnqSjm3T3Ui/imageAnimation.gif)