# 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:


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nswamy14.gitbook.io/i2djs-v5/api-reference/canvas-api.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.