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

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: