Kapi Text Transform (current)

main.js

(function () {
	if (!(document.getElementsByTagName("canvas").length)) {
		return;
	}

	(function () {
		var myKapi,
			myText;
		
		myKapi = kapi(document.getElementById('demo1'), {
			fps: 30,
			// Set up some basic styles for the canvas
			styles: {
				height: 	'400px',
				width: 		'500px',
				background: '#333'
			}
		}).play(); // Start the animation
		
		myText = myKapi.add(new stringActor(), {
			name: 		'circle1',
			text: 'foobar',
			x: 		70,
			y: 		70,
			color: 	'#00ffaa',
			easing: 'easeInOutQuint',
			m11: 1,
			m12: 0,
			m21: 0,
			m22: 1,
			dx: 0,
			dy: 0
		}).keyframe(0, { })
		.to('2s', {
			x: '+=100',
			y: 50,
			m11: 1,
			m12: .1,
			m21: .1,
			m22: 1,
			dx: 0,
			dy: 0
		}, {
			'start': function () {
				console.log('Immediate action started!', this);
			},
			'complete': function () {
				console.log('Immediate action completed!', this);
			}
		});
	}());
})();

stringActor.js

var stringActor = function() {
	this.setup = function (kapiInst, actorInst, params) {
		if (window.console) {
			console.log('Setting up: ' + this.id)
		}
	}
	
	this.draw = function (ctx, kapiInst, actorInst){
		ctx.save();
		ctx.transform(this.m11, this.m12, this.m21, this.m22, this.dx, this.dy)
		ctx.font = '50px arial,sans-serif' ;
		ctx.fillStyle = 'black' ;
		ctx.fillText (this.text, this.x || 0, this.y || 0);
		ctx.restore();
		return this;
	}
	
	this.teardown = function (actorName, kapiInst) {
		if (window.console) {
			console.log('Tearing down ' + actorName);
			console.dir(kapiInst);
		}
	}
};