> 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/api-reference/canvas-api.md).

# Canvas additional features

Canvas is a raster-based graphics rendering API. I2D Canvas provides API's with simple syntax to create different geometrical shapes. It has an internal pseudo-DOM implementation of all basic elements supported by SVG. It also provides pixel manipulation capabilities and also supports **events** to create more interactive canvas visualizations.

### Shapes Supported:

Canvas supports all geometrical primitives which are supported in SVG - **rect, circle, line, polyline, polygon, path, group, ellipse.**

For example, the below code snippet creates a circle using I2Ds canvas renderer instance. **Attr** object consists of attributes similar to SVG, whereas **style** follows Canvas properties.

**Example 1: Circle**

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

**Example 2: Line**

Below code snippet creates a line with X1, Y1, X2, Y2 attributes with Style as per Canvas syntax.

```
let line = renderer.createEl({
    el: 'line',
    attr: {
        x1: 10,
        y1: 100,
        x2: 100,
        y2: 100,
    },
    style: {
        strokeStyle: '#00ff00',
        lineWidth: 5
    }
})
```

**Example 3: Path**

```
let path = renderer.createEl({
    el: 'path',
    attr: {
        d: "M150 0 L75 200 L225 200 Z"
    },
    style: {
        strokeStyle: '#ff0000'
    }
})
```

## Special Canvas APIs:

### Group: 

Similar to SVG, I2Djs provides a group element under Canvas API. Group Element helps in writing common attributes along with styles to all its children. 

For Example: All the children will be translated by \[100, 100] with fill = '#00ff00' 

```
let group = renderer.createEl({
    el: 'group',
    attr: {
        transform: {
            translate: [100, 100]
        }
    },
    style: {
        fillStyle: '#00ff00'
    }
});
```

### **Image:**

I2Djs canvas image API provides special functionality for manipulating pixels of the image - **clip**, and **pixels.**

#### **Clip:**  

Used to clip the image as per **'sx', 'sy', 'swidth', 'sheight'** parameters. In the below example it is used in clipping the sprite image.

Example: [Boy Clipping](https://i2djs.github.io/I2Djs/examples/canvas/image-spriteClipping.html)

```
var img = renderer_.createEl({ 
    el: 'image', 
    attr: { 
        src: '../images/boySprite.png', 
        width: 500, 
        height: 700, 
        x: 400, 
        y: 0, 
        clip: { 
            sx: 0, 
            sy: 0, 
            swidth: 108, 
            sheight: 140 
        }
    }
});
```

#### **Pixels:** 

Used to manipulate the pixels of the image. Accepts function as a value, which will be invoked by passing pixelData as an argument. On execution, the function has to return the manipulated pixelData Object.

```
var img = renderer_.createEl({ 
    el: 'image', 
    attr: { 
        src: '../images/boySprite.png', 
        width: 500, 
        height: 700, 
        x: 400, 
        y: 0, 
        pixels: function (pixelData) { 
            localPixelData = pixelData.data; 
            return pixelData; 
        } 
    } 
}); 
```

## Performance hooks:

BBox Flag:

Events Flag: