Demo — Style and Animation

This example demonstrates a rectangle with a little more style applied to it. It will have a linear gradient and a shadow. When the rectangle is clicked, it will rotate and resize.

View Example

Code

var canvas = oCanvas.create({
	canvas: "#canvas",
	fps: 60
});

var button = canvas.display.rectangle({
	x: canvas.width / 2,
	y: canvas.width / 5,
	origin: { x: "center", y: "top" },
	width: 300,
	height: 100,
	fill: "linear-gradient(315deg, #079, #013)",
	shadow: "0 0 20px rgba(0,0,0, 0.8)"
});
canvas.addChild(button);

var increase = true;
button.bind("click tap", function () {
	if (increase) {
		increase = false;

		this.stop().animate({
			x: canvas.width / 2,
			y: canvas.height / 1.5,
			height: 300,
			rotation: 180
		});
	} else {
		increase = true;

		this.stop().animate({
			x: canvas.width / 2,
			y: canvas.width / 5,
			height: 100,
			rotation: 0
		});
	}
});

Output