Basic HTML5/Canvas setup with CreateJS. Full page canvas for games, demos, or other effects.

canvas.js

// Always `use strict` to receive useful warnings.
"use strict";
 
// Get and modify the canvas element as needed.
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
 
// Create stage and global references to stage objects.
var stage = new createjs.Stage(canvas);
var mtext, grue;
 
// **Initialization** 
// -----
 
// `init()` sets up and runs the animation.
function init(){
    // Declare the method to run for each `tick`.
    createjs.Ticker.addEventListener("tick", tick);
    // Set FPS.
    createjs.Ticker.setFPS(30);
    // Use `requestAnimationFrame` if available else use `setTimeout`.
    createjs.Ticker.useRAF = true;
    
    // **Example Object: Dynamic Text**
    // -----    
    
    // Create a `Text` object. (string, formatting, color)
    mtext = new createjs.Text("(0,0)\nClick Me",
                                  "100px bold Arial",
                                  "#f70");
    // Use `set` method to change default properties and add new ones.
    mtext.set({
        x: 20, // default is zero
        y: 20,
        // `handleEvent` routes the `event.type` to the internal function
        // with the same name. A "tick" event will run the mtext.tick method.
        // `stage` tracks the most recent mouse position over stage.
        handleEvent: function (e) { this[e.type](e); },
        tick: function () {
            this.text = '('+stage.mouseX+','+stage.mouseY+')' + '\nClick Me'
        },//tick
        click: function () {
            this.color = "#0f7";
            // `bind` sets the scope inside the `setTimeout` method 
            // to _this_ object instead of `window`.
            // Without `bind`, `this.color` must be `mtext.color`.
            setTimeout( function(){this.color = "#f70"}.bind(this), 1000 )
        },//click
    })
    // Many of CreateJS methods are chainable, such as `set` and `addEventListener`.
    // Add a `tick` and `click` listener.
    // When using an object as the second parameter, 
    // it expects to find a `handleEvent` method in the object
    // or reports an error.
    .addEventListener("tick", mtext)
    .addEventListener("click", mtext);
    
    // Add object to stage to be drawn for each `stage.update`.
    stage.addChild(mtext);
    
    // **Example Object: Shape object**
    // -----
    
    // Create an instance of a graphics object and add to the stage.
    grue = new Grue();
    stage.addChild(grue);
}
 
// **`tick` function**
// -----
 
// In this example, the `mtext` object handles its own _ticking_
// which executes during the call to `stage.update`.
// Alternatively, the `grue` _ticking_ is handled in this `tick` method
// but it too could be moved to the object.
function tick(event){
    grue.x = stage.mouseX;
    grue.y = stage.mouseY;
    // _ticks_ all descendants of the stage and draws to canvas.
    // Parameters passed to `update` will be passed to descendants.
    stage.update(event);
}
 
// Run the animation here or add `init` to onload parameter of `body`.
init();

Grue.js

"use strict";
 
// Create a `Player` class that inherits from `createjs.Shape`.
function Grue() {
    // This example object will display a circle with a transparency gradient
    // The center is transparent and becomes solid blue at edges.
    this.graphics.beginStroke("#F0F") // Purple edge. 
        .beginRadialGradientFill(
            ["rgba(0,0,0,0.2)","rgba(0,0,255,1)"], // colors: [center, edge]
            [0,1], // gradient: [begin, end]
            -10,-10,20, // gradient inner circle
            10,10,50) // gradient outer circle
        .drawCircle(0,0,50);
    // Overwrite initial position. Default is (0,0).
    this.x = 13;
    this.y = 27;
};
// Inherit from createjs.Shape
Grue.prototype = new createjs.Shape();
Grue.prototype.constructor = Grue;

// Event handlers.
Grue.prototype.handleEvent = function (e) { this[e.type](e) };
Grue.prototype.tick = function (e) {};
Grue.prototype.click = function (e) {console.log("Grue CLICKED")};

index.html

<!DOCTYPE html>
<meta charset=utf-8>
<title>DEMO</title>
<style>
    * { margin:0; padding:0; }
    html, body { width:100%; height:100%; }
    canvas { display: block; }
</style>
<script src="http://code.createjs.com/createjs-2013.05.14.min.js"></script>


<body bgcolor="#000">
<canvas id="canvas" width=500 height=500 style="display:block;"></canvas>
<script src="Grue.js"></script>
<script src="canvas.js"></script>