CAKE HTML5 canvas experiment

cake.js

function html5_canvas() {

    // declare variables
    var $canvas, $circle, $rectangle, $backG, $canvasImage, $imageMask;

/* 
Create the HTML elements below
It is the child of the code tag and will be 750 x 600
*/
    $canvas = new Canvas(document.getElementById("code"), 750, 600);

/*
	Give the canvas a background of white
	*/

    $canvas.fill = "#fff";

/*
Create the gradient seetings
Add an x and y axis value
The colorStops are the rgb colour values
We will use the gradient in the circle below
*/
    $backG = new Gradient({
        endX: 300,
        endY: 300,
        colorStops: [
            [0, [255, 255, 255]],
            [1, [0, 0, 0]]
        ]
    });


/*
	Create a cirlce
	150px wide
	Set x and y axis values
	the fill is the previously made gradient
	stroke and stroke width set
	endAngle: Math.PI * 2 gives a perfect circle
	*/

    $circle = new Circle(150, {
        x: 200,
        y: 200,
        fill: $backG,
        stroke: 'rgb(255,241,12)',
        strokeWidth: 20,
        endAngle: Math.PI * 2
    });


/*
Here we use the addFrameListener function to add animation
t = total time in milliseconds that the application has been running
dt = milliseconds since the last frame
in the addFrameListener fucnction it is possible to use various transformation matrixes
such as skewX, skeyY, scale, rotation
Afterwards apend the cirlce object to the canvas
*/
    $circle.addFrameListener(

    function (t, dt) {
        this.scale = Math.sin(t / 1000);
    });

    $canvas.append($circle);

    $rectangle = new Rectangle(150, 150, {
        x: 300,
        y: 350,
        fill: 'rgb(255,241,12)',
        stroke: 'rgb(0,147,211)',
        strokeWidth: 20,
    });

    $rectangle.addFrameListener(

    function (t, dt) {
        this.rotation = Math.sin(t / 2000) * Math.PI * 2;
        this.skewX = Math.sin(t / 2000) * Math.PI * 2;
    });

    $canvas.append($rectangle);

    // load the image as below
    $canvasImage = Object.loadImage("smiley.png");

/*
Now create the image mask, animate it and append it to the canvas
*/
    $imageMask = new ImageNode($canvasImage);
    $imageMask.x = 450;
    $imageMask.y = 350;

    $imageMask.addFrameListener(

    function (t, dt) {
        this.scale = Math.tan(t / 1000);
    });

    $canvas.append($imageMask);

} // end function html5_canvas

function init() {

    html5_canvas();

}


// call init function
window.addEventListener("load", init, false);