Canvas: Clipping, Masking, Pattern

Clipping:

Clipping is a way to hide unwanted parts of the shape. It just uses geometrical shapes to define the clip area, with no style effects. I2Djs createClip() API, lets you define the clip area as shown below.

var clipInstance = renderer_.createClip();
clipInstance.clip.createEl({
	el: 'polygon',
	attr:{
		points: [{x: 0, y: 0}, {x: 0, y: 100}, {x: 100, y: 100}, {x: 100, y: 0}, {x: 0, y: 0}]
	}
});

ClipInstance to be applied to the shape via 'clip-Path' style property as given below.

g.createEl({
	el: 'circle',
	attr: {
		cx: 100,
		cy: 100,
		r: 100
	},
	style: {
		'clip-Path': clipInstance,
		strokeStyle: 'grey',
		fillStyle: 'green'
	}
});

Masking:

Masking is a way to apply complex, detailed shapes with styles on the elements. With the masking technique, one can implement beautiful visual effects and performant alternatives to other techniques.

I2Djs createMask() API to create mask instance. globalCompositeOperation of the maskInstance can be altered to leverage Canvas multi masking composition to create different effects. By default it is set to - 'destination-atop' composition.

Below example shows a way to define the mask using I2Djs createMask().

var maskInstance = renderer_.createMask();
maskInstance.mask.createEl({
	el: 'rect',
	attr:{
		x: 0,
		y: 0,
		width: 566,
		height: 200
	},
	style: {
		fillStyle: pattern2
	}
});

Maskinstance to be applied as a mask style property on the element as shown below.

renderer_1.createEl({
	el: 'image',
	attr: {
		src: './../../i2djsLogo.png',
		x: 0,
		y: 0,
		width: 566,
		height: 300
	},
	style: {
		mask: maskInstance
	}
});

Pattern: