sfdesigner/index.html

## index.html
<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
	<title>Test Game</title>
	<script type="text/javascript" src="js/easel.js"></script>
    <script type="text/javascript" src="js/shapeData.js"></script>
	<script type="text/javascript" src="js/game.js"></script>
	<link rel="stylesheet" type="text/css" href="">
</head>
<body onload="init();">
	<canvas id="canvasStage" width="400" height="300"></canvas>
</body>
</html>

## project.js
// EaselJS Boilerplate - Doug Winnie - sfdesignerdw.wordpress.com

// establish stage and global objects
var stage;
var canvasWidth;
var canvasHeight;

var sampleShape; // sample shape

function init() {
    // confirmation message
    console.log("project.js init method activated");

    // access stage object
	var canvas = document.getElementById('canvasStage');

    // determine stage size
	canvasWidth = document.getElementById('canvasStage').width;
	canvasHeight = document.getElementById('canvasStage').height;

    // create stage size
    stage = new Stage(canvas);

    /* Start of Sample Drawing */
    sampleShape = new Shape();
    sampleShape.graphics.setStrokeStyle(1);
    sampleShape.graphics.beginStroke(Graphics.getRGB(0,0,0,1));
    sampleShape.graphics.beginFill(Graphics.getRGB(0,255,0,1));
    sampleShape.graphics.rect(25,25,100,20);
    sampleShape.graphics.endFill();
    stage.addChild(sampleShape);
    /* End of Sample Drawing */

	stage.update();

    Ticker.addListener(this); // needed if animating
}

// needed if animating
function tick() {
    stage.update();
}
	<!doctype html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
	<title>Test Game</title>
	<script type="text/javascript" src="js/easel.js"></script>
	<script type="text/javascript" src="js/shapeData.js"></script>
	<script type="text/javascript" src="js/game.js"></script>
	<link rel="stylesheet" type="text/css" href="">
	</head>
	<body onload="init();">
	<canvas id="canvasStage" width="400" height="300"></canvas>
	</body>
	</html>
	// EaselJS Boilerplate - Doug Winnie - sfdesignerdw.wordpress.com

	// establish stage and global objects
	var stage;
	var canvasWidth;
	var canvasHeight;

	var sampleShape; // sample shape

	function init() {
	// confirmation message
	console.log("project.js init method activated");

	// access stage object
	var canvas = document.getElementById('canvasStage');

	// determine stage size
	canvasWidth = document.getElementById('canvasStage').width;
	canvasHeight = document.getElementById('canvasStage').height;

	// create stage size
	stage = new Stage(canvas);

	/* Start of Sample Drawing */
	sampleShape = new Shape();
	sampleShape.graphics.setStrokeStyle(1);
	sampleShape.graphics.beginStroke(Graphics.getRGB(0,0,0,1));
	sampleShape.graphics.beginFill(Graphics.getRGB(0,255,0,1));
	sampleShape.graphics.rect(25,25,100,20);
	sampleShape.graphics.endFill();
	stage.addChild(sampleShape);
	/* End of Sample Drawing */

	stage.update();

	Ticker.addListener(this); // needed if animating
	}

	// needed if animating
	function tick() {
	stage.update();
	}