# 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
    	}
    });
})
```