Canvas Layer

Layer API:

#.canvasLayer( #containerId, contextAttrObj, SettingsObj);

CanvasLayer API return rendering instance of Canvas-2D context. It accepts multiple parameters as specified below.

Example:

var canvasLayer = i2d.canvasLayer(#containerID, {
    alpha: false
}, {
    enableEvents: true
});

• containerID - CSS ID selector which uniquely identifies the container in which the Canvas element will be appended.

• contextAttrObject - Canvas context attributes, which will be passed to the getContext method.

• SettingsObj - Object with below settings.

  • enableEvents - Boolean - Flag to enable/disable events for the rendered layer. Default is True

  • enableResize - Boolean - Flag to enable/disable window resize event. Set it to false, to disable the layer resize. Default is True.

  • autoUpdate - Boolean - To disable auto rendering of VDom changes to DOM. Used only in special cases to improve rendering performance. On disabling, one should invoke layerInstance.update() to manually render the changes to the DOM.

Layer Methods:

Layer.setLayerId( String ) - For setting ID attribute to the Layer Dom element.

Layer.setClear( function ) - To set clear callback method. Accepts function as an input, which gets invoked on every refresh Cycle before render begins. The clear function gets context as an argument.

renderer_.setClear(function (ctx) {
		ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
		ctx.fillRect(0, 0, renderer_.width, renderer_.height);
	});

Layer.setAttr( attribute, value ) - To set attributes to the layer Dom Element.

Layer.setStyle( prop, value ); - To set style properties to the layer Dom Element.

Layer.SetPixelRation( Int ); - To set device Pixel ratio.

Layer.onResize( function ); - Accepts callback method which will be invoked on window resize. It can be used to make the layer more responsive to window resize.

Layer.SetSize( width, height ); - Optional - To set the Size of the canvas layer. If not, the parent container size will be inherited by the layer.

Layer.enableEvents( Boolean ); - To enable or disable events. Option to disable the events to boost the rendering performance. It accepts boolean as an argument.

Layer.getPixels( x, y, width, height ); - To fetch pixels from the specified rectangle area of the canvas layer. It returns the ImageData object.

Layer.putPixels( imageData, x, y ); - To paint pixels to the canvas. It accepts ImageData along with position x, y as an argument.

Layer.clear( ); - To clear the canvas. It can be invoked in some special cases to clear the canvas.

Layer.setContext( prop, value ); - To set properties to the canvas context.

Layer.update( ); - API to manually trigger the Layer update. In the case of the default behavior, all the changes from VDOM will be applied to the DOM as a part of the refresh cycle.

Layer.destroy( ); - To remove layer instance. It removes the DOM element along with the vDOM. and Also unbinds all the event listeners is any.

Textures

I2Djs textures load Images/graphical elements as canvas bitmap elements. and Also It provides a set of useful APIs for texture manipulations like clipping, filters..etc. I2Djs provides texture, createTexture and createAsyncTexture, API as part of CanvasLayer.

Also, these APIs support multi image, setting src with an array of image URL.

Layer.createTexture(); - Creates texture instance. Returns Texture instance.

let textureInstance = canvasLayerInstance.createTexture({
                attr: {
                    src: "../images/coinSprite.png",
                    width: 45,
                    height: 45,
                    clip: {
                        sx: 0,
                        sy: 0,
                        swidth: 44,
                        sheight: 40,
                    },
                    onload: function () {},
                    onerror: function () {}
                },
            });

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

Layer.createAsyncTexture(); - Used to load one or more textures Asynchronously. This API returns a promise object, which resolves texture as shown below.

let texturePromise = canvasLayerInstance.createAsyncTexture({
                attr: {
                    src: "../images/coinSprite.png",
                    width: 45,
                    height: 45,
                    clip: {
                        sx: 0,
                        sy: 0,
                        swidth: 44,
                        sheight: 40,
                    },
                },
            });

texturePromise.then(function(texture) {
    var img = canvasLayerInstance.createEl({
    	el: 'image',
    	attr: {
    		src: texture,
    		width: 100,
    		height: 100,
    		x: 300,
    		y: 0
    	}
    });
})