jCanvaScript::documentation::functions::addObject

Allows you to add your own objects, based on low-level canvas API. You need to add function .getRect() to your object to fully support all the features of the library.

addObject(string name, object parameters, function fn)

return: jCanvaScript

Code

<script type="text/javascript">
	function start_1(idCanvas)
	{
		jc('#myObject_1')
			.animate({shift:'+=20'},100);
	}
	function stop_1(idCanvas)
	{
		jc('#myObject_1')
			.animate({shift:'-=20'},100);
	}
	function onload_1(idCanvas)
	{
		jc.start(idCanvas,true);
		jc.addObject('myObject',
			{x:0,y:0,width:0,height:0,color:'rgba(0,0,0,0)',shift:0},
			function(ctx)
			{				
				ctx.rect(this._x, this._y+this._shift, this._width, this._height);
				ctx.rect(this._x, this._y-this._shift, this._width, this._height);
				ctx.rect(this._x+this._shift, this._y, this._width, this._height);
				ctx.rect(this._x-this._shift, this._y, this._width, this._height);
			});
		jc.myObject(125,130,40,40,'#FF0000',30)
			.id('myObject_1');
	}
</script>
<canvas id="canvas_1" width="250px" height="265px">
</canvas>

View

addObject(string name, object parameters, function fn, string parent)

return: jCanvaScript

You can use power of inheritance with it. Just set name of parent class for inheritance.

Code

<script type="text/javascript">
	function start_2(idCanvas)
	{
		jc('#myObject_2')
			.string('hm...');
	}
	function stop_2(idCanvas)
	{
		jc('#myObject_2')
			.string('String of stroked and filled text.');
	}
	function onload_2(idCanvas)
	{
		jc.start(idCanvas,true);
		jc.addObject('fullText',
			{string:'',x:0,y:0,color:'rgba(0,0,0,0)'},
			function(ctx)
			{
				ctx.strokeStyle=ctx.fillStyle;				
				ctx.strokeText(this._string, this._x, this._y, this._maxWidth);
				ctx.fillText(this._string, this._x, this._y, this._maxWidth);
			},'text');
		jc.fullText('String of stroked and filled text.',50,40,'#FF0000')
			.id('myObject_2');
	}
</script>
<canvas id="canvas_2" width="250px" height="265px">
</canvas>

View