### Start Local Python Web Server

Source: https://github.com/createjs/easeljs/blob/master/README_SECURITY_ERROR.txt

Use this command to start a simple HTTP server for local testing. Navigate to your project directory before running.

```bash
python -m SimpleHTTPServer
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/createjs/easeljs/blob/master/build/README.md

Installs all project-specific dependencies defined in the package.json file. Ensure you are in the build directory.

```bash
cd /path/to/libraryName/build/
npm install
```

--------------------------------

### Install Dependencies with npm

Source: https://github.com/createjs/easeljs/blob/master/tests/README.md

Before running tests, install project dependencies using npm.

```bash
npm install
```

--------------------------------

### EaselJS Setup and Asset Loading

Source: https://github.com/createjs/easeljs/blob/master/extras/SVGExporter/SVGExport.html

Initializes EaselJS, sets up a stage with a mask, and loads assets using a LoadQueue. The setup function is called upon completion of asset loading.

```javascript
var c = createjs, stage, exporter;
var queue = new c.LoadQueue();
queue.on("complete", setup);
queue.loadManifest([
  {id:"daisy", src:"daisy.png"},
  {id:"bmpfont", src:"spritesheet_font.png"}
], true, "../../_assets/art/");

function setup() {
  stage = new c.Stage("test");
  var mask = new c.Shape();
  mask.graphics.beginFill("red").drawEllipse(0,0,500,800);
  stage.mask = mask;
  // this will cause Sprites to disappear in Illustrator, because sprites use masks, and AI doesn't import nested masks correctly
  var shape = new c.Shape(), g = shape.graphics;
  stage.addChild(shape);
  // ... rest of the drawing code ...
}
```

--------------------------------

### Initialize EaselJS Stage and Load Image

Source: https://github.com/createjs/easeljs/blob/master/examples/AlphaMaskReveal.html

Sets up the EaselJS stage, loads an image, and prepares text elements. This is the initial setup for the demo.

```javascript
var stage; var isDrawing; var drawingCanvas; var oldPt; var oldMidPt; var image; var bitmap; var maskFilter; var cursor; var text; var blur; function init() { examples.showDistractor(); image = new Image(); image.onload = handleComplete; image.src = "../\_assets/art/flowers.jpg"; stage = new createjs.Stage("testCanvas"); text = new createjs.Text("Loading...", "20px Arial", "#FFF"); text.set({x: stage.canvas.width / 2, y: stage.canvas.height - 40}); text.textAlign = "center"; }
```

--------------------------------

### Setup UI Elements

Source: https://github.com/createjs/easeljs/blob/master/examples/WebGL/Runners.html

Adds background elements, sprite containers for runners and sparkles, and a bitmap text header to the stage.

```javascript
function setupUI(queue) {
    // background hill - just to demonstrate that bitmaps can be added to a StageGL:
    var hill1 = new createjs.Bitmap(queue.getResult("hill"));
    hill1.setTransform(345, 110, 3, 3);
    var hill2 = hill1.clone();
    hill2.x -= 600;
    // SpriteContainers for runners and sparkles.
    // Each SpriteContainer specifies a SpriteSheet that all its descendants must share:
    runnerContainer = new createjs.Container(runnerSS);
    sparkleContainer = new createjs.Container(sparkleSS);
    // Bitmap Text header.
    // Again, the children must all share the SpriteSheet specified by the container.
    var topText = new createjs.BitmapText("CLICK TO DETONATE!", textSS);
    topText.setTransform(10, 10);
    stage.addChild(hill1, hill2, runnerContainer, topText, sparkleContainer);
}
```

--------------------------------

### Install Grunt CLI

Source: https://github.com/createjs/easeljs/blob/master/build/README.md

Installs the Grunt command line interface globally. This is a necessary step before running Grunt tasks.

```bash
sudo npm install grunt-cli -g
```

--------------------------------

### Initialize EaselJS Stage and Event Listeners

Source: https://github.com/createjs/easeljs/blob/master/examples/GlobalToLocal1.html

Sets up the EaselJS stage, enables touch and DOM events, and attaches mouse event listeners for drawing functionality. This is the initial setup for the interactive drawing example.

```javascript
var canvas; var stage; var _mouseIsDown; var _mouseX; var _mouseY; var spin1; // nested invisble container to generate a spirograph effect var spin2; // nested invisble container to generate a spirograph effect var shape; // drawing shape var color; // drawing color var lastPt; // last draw position var text; var graphics; var count = 0; function init() { // create a new stage and point it at our canvas: canvas = document.getElementById("testCanvas"); stage = new createjs.Stage(canvas); createjs.Touch.enable(stage); // attach mouse handlers directly to the source canvas // better than calling from canvas tag for cross browser stage.enableDOMEvents(true); stage.addEventListener("stagemousemove", mouseMove); stage.addEventListener("stagemousedown", mouseDown); stage.addEventListener("stagemouseup", mouseUp); text = new createjs.Text("Click and Drag", "36px Arial", "#777777"); text.x = 360; text.y = 200; stage.addChild(text); // shape to draw vector data into: shape = new createjs.Shape(); shape.x = 41; //position in parent container graphics = shape.graphics; // middle spinner: spin2 = new createjs.Container(); spin2.addChild(shape); spin2.x = 303; //position in parent container // outside spinner: spin1 = new createjs.Container(); spin1.addChild(spin2); // center it on the stage: spin1.x = canvas.width / 2; spin1.y = canvas.height / 2; stage.addChild(spin1); // start the tick and point it at the window so we can do some work before updating the stage: createjs.Ticker.framerate = 30; createjs.Ticker.addEventListener("tick", tick); }
```

--------------------------------

### Install Sass

Source: https://github.com/createjs/easeljs/blob/master/build/README.md

Installs or updates Sass, which is required for the build process. Ruby is a prerequisite for Sass.

```bash
gem install sass;
```

--------------------------------

### Setup Stages and Create Buttons

Source: https://github.com/createjs/easeljs/blob/master/examples/WebGL/TwoStages.html

Sets up both a WebGL stage and a Context2D stage, enabling mouse over events for both. It then configures the Context2D stage to pass unhandled events to the WebGL stage and creates two button instances, one for each stage.

```javascript
function handleImageLoad(evt) {
  webGLStage = new createjs.StageGL("webGLCanvas");
  webGLStage.enableMouseOver();
  c2dStage = new createjs.Stage("c2dCanvas");
  c2dStage.enableMouseOver(10);
  c2dStage.nextStage = webGLStage; // spritesheet "bitmap" button:
  var spriteSheet = new createjs.SpriteSheet({
    images: [evt.target],
    frames: {width: 300, height: 100},
    animations: { out: 0, over: 1, down: 2 }
  });
  var bitmapButton = new createjs.Sprite(spriteSheet, "up");
  webGLStage.addChild(bitmapButton).set({x: 250, y: 150});
  new createjs.ButtonHelper(bitmapButton);
  // movieclip "vector" button:
  var vectorButton = new lib.VectorButton();
  c2dStage.addChild(vectorButton).set({x: 50, y: 30});
  new createjs.ButtonHelper(vectorButton);
  createjs.Ticker.addEventListener("tick", c2dStage);
  createjs.Ticker.addEventListener("tick", webGLStage);
}
```

--------------------------------

### Handle Image Load and Setup Filters

Source: https://github.com/createjs/easeljs/blob/master/examples/AlphaMaskReveal.html

Completes the initialization after the image is loaded. It enables touch interactions, sets up mouse event listeners, creates the mask and filters, and adds display objects to the stage.

```javascript
function handleComplete() { examples.hideDistractor(); createjs.Touch.enable(stage); stage.enableMouseOver(); stage.addEventListener("stagemousedown", handleMouseDown); stage.addEventListener("stagemouseup", handleMouseUp); stage.addEventListener("stagemousemove", handleMouseMove); drawingCanvas = new createjs.Shape(); drawingCanvas.cache(0, 0, image.width, image.height); bitmap = new createjs.Bitmap(image); maskFilter = new createjs.AlphaMaskFilter(drawingCanvas.cacheCanvas); bitmap.filters = [maskFilter]; bitmap.cache(0, 0, image.width, image.height); blur = new createjs.Bitmap(image); blur.filters = [new createjs.BlurFilter(24, 24, 2), new createjs.ColorMatrixFilter(new createjs.ColorMatrix(60))]; blur.cache(0, 0, 960, 400); text.text = "Click and Drag to Reveal the Image."; stage.addChild(blur, text, bitmap); cursor = new createjs.Shape(new createjs.Graphics().beginFill("#FFFFFF").drawCircle(0, 0, 25)); cursor.cursor = "pointer"; stage.addChild(cursor); }
```

--------------------------------

### Initialize EaselJS Stage and Load Assets

Source: https://github.com/createjs/easeljs/blob/master/examples/DragAndDrop.html

Sets up the EaselJS stage, enables touch and mouseover events, and loads an image asset. This is the initial setup required for most EaselJS applications.

```javascript
var canvas, stage; var mouseTarget; // the display object currently under the mouse, or being dragged var dragStarted; // indicates whether we are currently in a drag operation var offset; var update = true;
function init() {
  examples.showDistractor(); // create stage and point it to the canvas: canvas = document.getElementById("testCanvas"); stage = new createjs.Stage(canvas); // enable touch interactions if supported on the current device: createjs.Touch.enable(stage); // enabled mouse over / out events stage.enableMouseOver(10); stage.mouseMoveOutside = true; // keep tracking the mouse even when it leaves the canvas // load the source image: var image = new Image(); image.src = "../\_assets/art/daisy.png"; image.onload = handleImageLoad;
}
function stop() {
  createjs.Ticker.removeEventListener("tick", tick);
}
function handleImageLoad(event) {
  var image = event.target;
  var bitmap;
  var container = new createjs.Container();
  stage.addChild(container);
  // create and populate the screen with random daisies:
  for (var i = 0; i < 100; i++) {
    bitmap = new createjs.Bitmap(image);
    container.addChild(bitmap);
    bitmap.x = canvas.width * Math.random() | 0;
    bitmap.y = canvas.height * Math.random() | 0;
    bitmap.rotation = 360 * Math.random() | 0;
    bitmap.regX = bitmap.image.width / 2 | 0;
    bitmap.regY = bitmap.image.height / 2 | 0;
    bitmap.scale = bitmap.originalScale = Math.random() * 0.4 + 0.6;
    bitmap.name = "bmp_" + i;
    bitmap.cursor = "pointer";
    // using "on" binds the listener to the scope of the currentTarget by default // in this case that means it executes in the scope of the button.
    bitmap.on("mousedown", function (evt) {
      this.parent.addChild(this);
      this.offset = {x: this.x - evt.stageX, y: this.y - evt.stageY};
    });
    // the pressmove event is dispatched when the mouse moves after a mousedown on the target until the mouse is released.
    bitmap.on("pressmove", function (evt) {
      this.x = evt.stageX + this.offset.x;
      this.y = evt.stageY + this.offset.y;
      // indicate that the stage should be updated on the next tick: update = true;
    });
    bitmap.on("rollover", function (evt) {
      this.scale = this.originalScale * 1.2;
      update = true;
    });
    bitmap.on("rollout", function (evt) {
      this.scale = this.originalScale;
      update = true;
    });
  }
  examples.hideDistractor();
  createjs.Ticker.addEventListener("tick", tick);
}
function tick(event) {
  // this set makes it so the stage only re-renders when an event handler indicates a change has happened.
  if (update) {
    update = false; // only update once
    stage.update(event);
  }
}
```

--------------------------------

### CreateJS Text Example

Source: https://github.com/createjs/easeljs/blob/master/examples/APITest.html

Creates and adds a text object to the stage. Configure font, size, and color.

```javascript
function textDemo(stage) {
  var txt = new createjs.Text("Hello CreateJS!", "24px Arial", FILL_COLOR);
  txt.lineWidth = 150;
  stage.addChild(txt);
}
```

--------------------------------

### Handle Image Load and Setup Display List

Source: https://github.com/createjs/easeljs/blob/master/extras/PerformanceTests/bitmap.html

Callback function executed after the image is loaded. It populates the stage with containers and bitmaps, then sets up the Ticker for animation.

```javascript
function handleLoad() {
    time("setup");
    for (var i=0; i<containers; i++) {
        var container = getContainer();
        for (var j=0; j<bmps; j++) {
            container.addChild(getBitmap());
        }
    }
    endTime("setup");
    c.Ticker.timingMode = c.Ticker.RAF;
    c.Ticker.addEventListener("tick", handleTick);
}
```

--------------------------------

### Initialize EaselJS Stage and Load Image

Source: https://github.com/createjs/easeljs/blob/master/examples/Masks.html

Sets up the EaselJS stage and loads an image. The image loading is asynchronous, and subsequent setup occurs in the onload handler.

```javascript
var img, star, stage; 
var scale; 
var angle;

function init() {
  examples.showDistractor();
  //wait for the image to load
  img = new Image();
  img.onload = handleImageLoad;
  img.src = "../\_assets/art/flowers.jpg";
  angle = 0;
}
```

--------------------------------

### Load Assets and Start Ticker

Source: https://github.com/createjs/easeljs/blob/master/examples/WebGL/Runners.html

Handles asset loading completion, sets up sprite sheets and UI, and starts the EaselJS Ticker for animation.

```javascript
function handleLoad(evt) {
    setupSpriteSheets(evt.target);
    setupUI(evt.target);
    createjs.Ticker.timingMode = createjs.Ticker.RAF;
    createjs.Ticker.on("tick", tick, this);
}
```

--------------------------------

### Initialize EaselJS Stage and Shapes

Source: https://github.com/createjs/easeljs/blob/master/examples/Cache.html

Sets up the EaselJS stage, creates numerous complex vector shapes with random properties, and enables snapToPixel for each shape. This is the primary setup for the caching and performance demonstration.

```javascript
var canvas; var stage; var shape; var radius = 50; var rings = 40; function init() { // create a new stage and point it at our canvas: canvas = document.getElementById("testCanvas"); stage = new createjs.Stage(canvas); // create a large number of slightly complex vector shapes, and give them random positions and velocities: var colors = ["#828b20", "#b0ac31", "#cbc53d", "#fad779", "#f9e4ad", "#faf2db", "#563512", "#9b4a0b", "#d36600", "#fe8a00", "#f9a71f"]; for (var i = 0; i < 200; i++) { shape = new createjs.Shape(); for (var j = rings; j > 0; j--) { shape.graphics.beginFill(colors[Math.random() * colors.length | 0]).drawCircle(0, 0, radius * j / rings); } shape.x = Math.random() * canvas.width; shape.y = Math.random() * canvas.height; shape.velX = Math.random() * 10 - 5; shape.velY = Math.random() * 10 - 5; // turn snapToPixel on for all shapes - it's set to false by default on Shape. // it won't do anything until stage.snapToPixelEnabled is set to true. shape.snapToPixel = true; stage.addChild(shape); } // add a text object to output the current FPS: fpsLabel = new createjs.Text("-- fps", "bold 18px Arial", "#FFF"); stage.addChild(fpsLabel); fpsLabel.x = 10; fpsLabel.y = 20; // start the tick and point it at the window so we can do some work before updating the stage: createjs.Ticker.timingMode = createjs.Ticker.RAF; createjs.Ticker.addEventListener("tick", tick); }
```

--------------------------------

### Handle Game Start Click

Source: https://github.com/createjs/easeljs/blob/master/examples/Game/Game.html

Removes the click listener, hides the welcome message, plays a 'begin' sound, and calls the restart function to initialize the game.

```javascript
function handleClick() {
  //prevent extra clicks and hide text
  canvas.onclick = null;
  stage.removeChild(messageField);
  // indicate the player is now on screen
  createjs.Sound.play("begin");
  restart();
}
```

--------------------------------

### Using EaselJS in a Backbone View

Source: https://github.com/createjs/easeljs/wiki/Using-easeljs-and-tweenjs-with-requirejs

Integrate EaselJS into a Backbone view by defining it as a dependency. This example initializes a createjs.Stage.

```javascript
define([
	'jquery',
	'underscore',
	'backbone',
	'easel'
	], function($,_,Backbone) {
	var GameView = Backbone.View.extend({
		initialize : function(){
			var canvas = document.getElementById('gameCanvas');
            		var stage = new createjs.Stage(canvas); // all good - soldier on... 
			console.log(stage, "GameView / initialize"); // quick test - stage is not null 
	});
	return GameView;
}); 
```

--------------------------------

### Stage Setup Function

Source: https://github.com/createjs/easeljs/blob/master/examples/TwoStages.html

A helper function to create and configure an EaselJS stage with event listeners and the ticker. Call this to initialize new stages.

```javascript
/* create a stage object to work with the canvas
 add event listeners for stage events
 start tick on stage */
function stageSetup(canvasName, handler) {
  stage = new createjs.Stage(canvasName);
  //stage.addEventListener("stagemousemove", handler); // too noisy
  stage.addEventListener("stagemousedown", handler);
  stage.addEventListener("stagemouseup", handler);
  stage.addEventListener("mouseleave", handler);
  stage.addEventListener("mouseenter", handler);
  createjs.Ticker.addEventListener("tick", stage);
  stage.log = [];
  return stage;
}
```

--------------------------------

### EaselJS Transform Example

Source: https://github.com/createjs/easeljs/blob/master/examples/Transform.html

Initializes the EaselJS stage, loads an image, and sets up event listeners for mouse interaction and touch. This code is essential for setting up the canvas and image loading.

```javascript
var stage, sliceContainer, sliceWidth, degToRad = Math.PI / 180; function init() { examples.showDistractor(); stage = new createjs.Stage("testCanvas"); stage.enableMouseOver(); createjs.Touch.enable(stage); stage.mouseMoveOutside = true; var img = new Image(); img.onload = handleImageLoad; img.src = "../\_assets/art/flowers.jpg"; }
```

--------------------------------

### EaselJS Performance Test Setup

Source: https://github.com/createjs/easeljs/blob/master/extras/PerformanceTests/displayList.html

Initializes the EaselJS stage, graphics, and populates the display list with containers and shapes. This function is called by the performance framework.

```javascript
var c;
var containers=200, shapes=200, w, h, count= 0, offset= 0, g, stage; // runTest is a special method called by the performance framework // it passes the version array (ex. [0,7,1]) and a hash of all the query string values
function runTest(version, qs) {
    if (!checkVersion("0.6")) {
        return endTest();
    }
    c = checkVersion("0.5") ? createjs : window;
    var canvas = document.getElementById("testCanvas");
    w=canvas.width;
    h=canvas.height;
    stage = new c.Stage(canvas);
    stage.tickOnUpdate = false;
    stage.enableDOMEvents(false);
    // stage.canvas = new FauxCanvas(true);
    g = new c.Graphics().beginFill("red").drawRect(-1,-1,2,2);
    time("setup");
    for (var i=0; i<containers; i++) {
        var container = getContainer();
        for (var j=0; j<shapes; j++) {
            container.addChild(getShape());
        }
    }
    endTime("setup");
    c.Ticker.timingMode = c.Ticker.RAF;
    c.Ticker.addEventListener("tick", handleTick);
}
```

--------------------------------

### Handle Image Load and Ticker Setup

Source: https://github.com/createjs/easeljs/blob/master/extras/Filters/ThresholdFilter.html

This function is called once the image is loaded. It creates the EaselJS stage, adds the bitmap, caches it, and sets up the animation ticker.

```javascript
function handleImageLoad() {
  stage = new createjs.Stage("testCanvas");
  bmp = new createjs.Bitmap(img);
  bmp.cache(0, 0, img.width, img.height);
  stage.addChild(bmp);
  createjs.Ticker.setFPS(15);
  createjs.Ticker.on("tick", tick);
}
```

--------------------------------

### Create and Load SpriteSheet for Tile Map

Source: https://github.com/createjs/easeljs/blob/master/examples/SpriteSheet_tileset.html

Initializes the stage, loads the spritesheet image, and defines the SpriteSheet configuration including frame dimensions, spacing, and margins. This setup is crucial for correctly parsing the tileset image.

```javascript
var stage;
function init() {
  // create a new stage and point it at our canvas:
  stage = new createjs.Stage("testCanvas");

  // load the spritesheet image:
  var image = new Image();
  image.onload = handleLoad;
  image.src = "../\_assets/art/tmw_desert_spacing.png";
}
```

--------------------------------

### Initialize Benchmark Variables and GUI

Source: https://github.com/createjs/easeljs/blob/master/examples/WebGL/Benchmark.html

Sets up global variables, manifest for assets, and a GUI for controlling benchmark parameters like object count and rendering mode. Includes event listeners for user interaction.

```javascript
var canvas, stage, stats, container;
var isReady = false;
var manifest = [];
var queue = null;
var MIN_STEP = 5;
var CANVAS_WIDTH = 960;
var CANVAS_HEIGHT = 400;
var MaxPerTick = 100;
var MaxEver = 50000;
var guiProps = null;
var guiPropsRef = function() {
  this.objects = MaxPerTick;
  this.triangles = "";
  this.texture = "Sprite Sheet";
  this.directDraw = true;
  this.allowWebGL = true;
  this.more = handleRelease; // add event listener for down
  this.less = handleRelease; // add event listener for down
  this.reset = reset;
};
var adjustFolder, propsFolder;
var propParticle;
var cjsSprites = null;
var adding = 0;
var objects = [];
var bounds = {};
function ready() {
  examples.showDistractor("content");
  outDOM = document.getElementById("output");
  canvas = document.getElementById("loading");
  // stats reporter
  stats = new Stats();
  outDOM.appendChild(stats.domElement);
  stats.domElement.style.position = "absolute";
  stats.domElement.style.top = "0px";
  // controls setup
  guiProps = new guiPropsRef();
  var gui = new dat.GUI({ autoPlace: true });
  outDOM.appendChild(gui.domElement);
  var temp;
  gui.add(guiProps, "objects", 0, MaxEver).step(5).listen();
  temp = gui.add(guiProps, "triangles").listen().domElement.children[0];
  temp.disabled = true;
  adjustFolder = gui.addFolder('Sprites (click and hold)');
  temp = adjustFolder.add(guiProps, "more").domElement.parentNode.parentNode;
  temp.addEventListener("mousedown", startAdd);
  temp.addEventListener("touchstart", startAdd);
  temp = adjustFolder.add(guiProps, "less").domElement.parentNode.parentNode;
  temp.addEventListener("mousedown", startRemove);
  temp.addEventListener("touchstart", startRemove);
  propsFolder = gui.addFolder('Properties');
  propsFolder.open();
  propsFolder.add(guiProps, "texture", ["Individual", "Sprite Sheet"]).onChange(toggleEffect);
  propsFolder.add(guiProps, "allowWebGL").onChange(toggleEffect);
  propsFolder.add(guiProps, "directDraw").onChange(toggleEffect);
  gui.add(guiProps, "reset");
  // image assets, load separately and build into a single sheet for toggling
  manifest = [
    {id: "robot0", src: "robojs.png"},
    {id: "robot1", src: "robojs1.png"},
    {id: "robot2", src: "robojs2.png"},
    {id: "robot3", src: "robojs3.png"},
    {id: "robot4", src: "robojs4.png"},
    {id: "robot5", src: "robojs5.png"},
    {id: "robot6", src: "robojs6.png"},
    {id: "robot7", src: "robojs7.png"},
    {id: "robot8", src: "robojs8.png"},
    {id: "robot9", src: "robojs9.png"},
    {id: "robot10", src: "robojs10.png"}
  ];
  // begin actual load
  queue = new createjs.LoadQueue(true, "../../_assets/art/robojs/");
  queue.on("complete", handleLoad, this);
  queue.loadManifest(manifest, true);
}
```

--------------------------------

### Initialize Game and Sound

Source: https://github.com/createjs/easeljs/blob/master/examples/Game/Game.html

Sets up the game canvas, stage, and initializes SoundJS. Includes checks for browser compatibility and mobile device support. Loads game assets using createjs.LoadQueue.

```javascript
var DIFFICULTY = 2; //how fast the game gets more difficult var ROCK_TIME = 110; //aprox tick count until a new asteroid gets introduced var SUB_ROCK_COUNT = 4; //how many small rocks to make on rock death var BULLET_TIME = 5; //ticks between bullets var BULLET_ENTROPY = 100; //how much energy a bullet has before it runs out. var TURN_FACTOR = 7; //how far the ship turns per frame var BULLET_SPEED = 17; //how fast the bullets move var KEYCODE_ENTER = 13; //useful keycode var KEYCODE_SPACE = 32; //useful keycode var KEYCODE_UP = 38; //useful keycode var KEYCODE_LEFT = 37; //useful keycode var KEYCODE_RIGHT = 39; //useful keycode var KEYCODE_W = 87; //useful keycode var KEYCODE_A = 65; //useful keycode var KEYCODE_D = 68; //useful keycode var manifest; // used to register sounds for preloading var preload; var shootHeld; //is the user holding a shoot command var lfHeld; //is the user holding a turn left command var rtHeld; //is the user holding a turn right command var fwdHeld; //is the user holding a forward command var timeToRock; //difficulty adjusted version of ROCK_TIME var nextRock; //ticks left until a new space rock arrives var nextBullet; //ticks left until the next shot is fired var rockBelt; //space rock array var bulletStream; //bullet array var canvas; //Main canvas var stage; //Main display stage var ship; //the actual ship var alive; //wheter the player is alive var messageField; //Message display field var scoreField; //score Field var loadingInterval = 0; //register key functions document.onkeydown = handleKeyDown; document.onkeyup = handleKeyUp; function init() { if (!createjs.Sound.initializeDefaultPlugins()) { document.getElementById("error").style.display = "block"; document.getElementById("content").style.display = "none"; return; } if (createjs.BrowserDetect.isIOS || createjs.BrowserDetect.isAndroid || createjs.BrowserDetect.isBlackberry) { document.getElementById("mobile").style.display = "block"; document.getElementById("content").style.display = "none"; return; } canvas = document.getElementById("gameCanvas"); stage = new createjs.Stage(canvas); messageField = new createjs.Text("Loading", "bold 24px Arial", "#FFFFFF"); messageField.maxWidth = 1000; messageField.textAlign = "center"; messageField.textBaseline = "middle"; messageField.x = canvas.width / 2; messageField.y = canvas.height / 2; stage.addChild(messageField); stage.update(); //update the stage to show text // begin loading content (only sounds to load) var assetsPath = "sounds/"; manifest = [ {id: "begin", src: "spawn.ogg"}, {id: "break", src: "break.ogg", data: 6}, {id: "death", src: "death.ogg"}, {id: "laser", src: "shot.ogg", data: 6}, {id: "music", src: "music.ogg"} ]; createjs.Sound.alternateExtensions = ["mp3"];
preload = new createjs.LoadQueue(true, assetsPath);
preload.installPlugin(createjs.Sound);
preload.addEventListener("complete", doneLoading);
// add an event listener for when load is completed
preload.addEventListener("progress", updateLoading);
preload.loadManifest(manifest); }
```

--------------------------------

### Handle Mouse Down for Drawing Start

Source: https://github.com/createjs/easeljs/blob/master/examples/CurveTo.html

Initiates drawing by capturing the starting mouse position and setting a random color and stroke width. It also removes the initial title from the stage.

```javascript
function handleMouseDown(event) { if (!event.primary) { return; } if (stage.contains(title)) { stage.clear(); stage.removeChild(title); } color = colors[(index++) % colors.length]; stroke = Math.random() * 30 + 10 | 0; oldPt = new createjs.Point(stage.mouseX, stage.mouseY); oldMidPt = oldPt.clone(); stage.addEventListener("stagemousemove", handleMouseMove); }
```

--------------------------------

### TweenJS Animation Example

Source: https://github.com/createjs/easeljs/blob/master/tutorials/Animation and Ticker/index.html

Use TweenJS to animate properties of a display object over time. This example tweens the 'x' property to 300 over 1000ms, then back to 0, and calls a function upon completion.

```javascript
createjs.TweenJS.get(circle).to({x:300}, 1000).to({x:0}, 0).call(onAnimationComplete);
```

--------------------------------

### Initialize EaselJS Performance Test

Source: https://github.com/createjs/easeljs/blob/master/extras/PerformanceTests/bitmap.html

Sets up the test environment, including canvas, stage, and image loading. Requires a check for EaselJS version compatibility.

```javascript
var c;
var containers=200, bmps=200, w, h, count= 0, offset= 0, g, stage, img; // runTest is a special method called by the performance framework // it passes the version array (ex. [0,7,1]) and a hash of all the query string values
function runTest(version, qs) {
    if (!checkVersion("0.6")) {
        return endTest();
    }
    c = checkVersion("0.5") ? createjs : window;
    var canvas = document.getElementById("testCanvas");
    w = canvas.width;
    h = canvas.height;
    stage = new c.Stage(canvas);
    stage.tickOnUpdate = false;
    stage.enableDOMEvents(false);
    stage.canvas = new FauxCanvas(true);
    img = new Image();
    img.onload = handleLoad;
    img.src = "../../_assets/art/daisy.png";
}
```

--------------------------------

### Handle Mouse Down Event for Drawing

Source: https://github.com/createjs/easeljs/blob/master/examples/AlphaMaskReveal.html

Records the starting point of the mouse drag to initiate the drawing process for the mask.

```javascript
function handleMouseDown(event) { oldPt = new createjs.Point(stage.mouseX, stage.mouseY); oldMidPt = oldPt; isDrawing = true; }
```

--------------------------------

### Initialize EaselJS Stage and Load Image

Source: https://github.com/createjs/easeljs/blob/master/examples/Filters_input.html

Sets up the canvas, loads an image, and initializes the EaselJS stage. This is the entry point for the filter demonstration.

```javascript
var img; var stage; var bmp; var sliders = {}; var colorMatrix; var blurFilter;
function init() {
  examples.showDistractor();
  img = new Image();
  img.onload = handleImageLoad;
  img.src = "../\_assets/art/flowers.jpg";
}
function handleImageLoad() {
  examples.hideDistractor();
  var canvas = document.getElementById("testCanvas");
  stage = new createjs.Stage(canvas);
  stage.enableMouseOver();
  stage.mouseMoveOutside = true;
  bmp = new createjs.Bitmap(img);
  bmp.cache(0, 0, img.width, img.height);
  stage.addChild(bmp);
  var panel = new createjs.Shape().set({alpha: 0.7});
  panel.graphics.beginFill("#111").drawRect(0, canvas.height - 125, canvas.width, 125);
  stage.addChild(panel);
  var sliderNames = ["brightness", "contrast", "hue", "saturation", "blurX", "blurY"];
  for (var i = 0; i < sliderNames.length; i++) {
    var name = sliderNames[i];
    var x = (i / 2 | 0) * 300;
    var y = i % 2 * 50 + 305;
    var label = new createjs.Text(name, "18px Arial", "white");
    label.set({textAlign: "right", x: x + 150, y: y});
    var slider = new Slider(0, 1, 150).set({x: x + 160, y: y});
    sliders[name] = slider;
    if (i < 4) {
      slider.value = 0.5;
    }
    slider.on("change", handleSliderChange, this);
    stage.addChild(label, slider);
  }
  colorMatrix = new createjs.ColorMatrix();
  var colorMatrixFilter = new createjs.ColorMatrixFilter(colorMatrix);
  blurFilter = new createjs.BlurFilter(0, 0, 2);
  bmp.filters = [colorMatrixFilter, blurFilter];
  stage.update();
}
```

--------------------------------

### Initialize EaselJS Stage and Load Assets

Source: https://github.com/createjs/easeljs/blob/master/examples/SpriteSheet.html

Sets up the canvas, manifest for loading assets, and event listeners for completion and user interaction. Ensure assets are served from a web server to avoid security errors.

```javascript
var stage, w, h, loader;
var sky, grant, ground, hill, hill2;
function init() {
    examples.showDistractor();
    stage = new createjs.StageGL("testCanvas");
    // grab canvas width and height for later calculations:
    w = stage.canvas.width;
    h = stage.canvas.height;
    manifest = [
        {src: "spritesheet_grant.png", id: "grant"},
        {src: "sky.png", id: "sky"},
        {src: "ground.png", id: "ground"},
        {src: "hill1.png", id: "hill"},
        {src: "hill2.png", id: "hill2"}
    ];
    loader = new createjs.LoadQueue(false);
    loader.addEventListener("complete", handleComplete);
    loader.loadManifest(manifest, true, "../_assets/art/");
}
```

--------------------------------

### Initialize and ScaleBitmap in EaselJS

Source: https://github.com/createjs/easeljs/blob/master/extras/ScaleBitmap/ScaleBitmap.html

Sets up the EaselJS stage, loads an image, creates a ScaleBitmap instance, and adds it to the stage. The bitmap is initially scaled using a Rectangle and a draw size.

```javascript
var stage, text;
function init() {
  stage = new createjs.Stage("testCanvas");
  var image = new Image();
  image.onload = function() {
    stage.update();
  }
  image.src = "ScaleBitmapImage.png";
  var sb = new createjs.ScaleBitmap(image, new createjs.Rectangle(12, 12, 5, 10));
  sb.setDrawSize(200, 300);
  stage.addChild(sb);
  stage.on("stagemousedown", function(e) {
    sb.setDrawSize(Math.random() * 300 + 100 | 0, Math.random() * 100 + 60 | 0);
    stage.update();
  });
}
```

--------------------------------

### Create Hexagon Shape

Source: https://github.com/createjs/easeljs/blob/master/examples/GraphicsTestTiny.html

Draws a hexagon using the `dp` (drawPolygon) method. This example draws two overlapping hexagons.

```javascript
function createHex() {
  var container = createTile();
  var s = new createjs.Shape();
  s.graphics.f("#0F0").dp(0, 0, 40, 6).dp(0, 75, 40, 6);
  s.x = 80
  s.y = 40;
  container.addChild(s);
  return container;
}
```

--------------------------------

### Create Text with Constructor Parameters

Source: https://github.com/createjs/easeljs/blob/master/tutorials/Fonts/index.html

Instantiate a Text object with initial text, font, and color values.

```javascript
var text = new createjs.Text("Hello World", "bold 86px Arial", "#ff7700");
```

--------------------------------

### Apply BlurFilter

Source: https://github.com/createjs/easeljs/blob/master/examples/Filters.html

Applies a `BlurFilter` to the image. Note that the blur is applied horizontally in this example. Caching is required for the filter to render.

```javascript
var blurFilter = new createjs.BlurFilter(64, 0, 1);mp = bmp.clone();mp.filters = [blurFilter];mp.cache(0, 0, img.width, img.height);mp.y = 200;
stage.addChild(bmp);
```

--------------------------------

### Access MouseEvent Properties

Source: https://github.com/createjs/easeljs/blob/master/tutorials/Mouse Interaction/index.html

Access properties of the MouseEvent object within a handler to get event type, target, and stage coordinates.

```javascript
circle.on("click", function(evt) { alert("type: "+evt.type+" target: "+evt.target+" stageX: "+evt.stageX); });
```

--------------------------------

### Initialize EaselJS Stage

Source: https://github.com/createjs/easeljs/blob/master/examples/GraphicsTest.html

Sets up the canvas and the EaselJS stage. Ensure the canvas element exists in the HTML.

```javascript
var canvas, stage, img, w, h;
function init() {
  canvas = document.getElementById("testCanvas");
  stage = new createjs.Stage(canvas);
  w = canvas.width;
  h = canvas.height;
  img = new Image();
  img.onload = layout;
  img.src = "../\_assets/art/daisy.png";
}
```

--------------------------------

### Create Basic Text Instance

Source: https://github.com/createjs/easeljs/blob/master/tutorials/Fonts/index.html

Instantiate a Text object with default properties.

```javascript
var text = new createjs.Text();
text.text = "Hello World"
```

--------------------------------

### Build Only Documentation

Source: https://github.com/createjs/easeljs/blob/master/build/README.md

Runs only the documentation generation task.

```bash
grunt docs
```

--------------------------------

### Initialize EaselJS Stage and Display Text

Source: https://github.com/createjs/easeljs/blob/master/tutorials/Fonts/helloworld.html

This snippet shows the fundamental steps to set up an EaselJS stage and render a "Hello World" text object. Ensure a canvas element with id 'demoCanvas' exists in your HTML.

```javascript
var stage; function init() { stage = new createjs.Stage("demoCanvas"); var text = new createjs.Text("Hello World", "bold 86px Arial", "#ff7700"); stage.addChild(text); stage.update(); }
```

--------------------------------

### Build Release Version

Source: https://github.com/createjs/easeljs/blob/master/build/README.md

Executes the standard release build process. This updates version files, creates a minified library file, generates documentation, and zips the documentation.

```bash
grunt build
```

--------------------------------

### Initialize Two Stages and Event Handlers

Source: https://github.com/createjs/easeljs/blob/master/examples/TwoStages.html

Sets up two EaselJS stages, assigns event listeners, and configures `nextStage` to pass events. Use this to layer interactive elements.

```javascript
var bottomStage, topStage;
function init() {
  bottomStage = stageSetup("canvasOne", handleEvt);
  bottomStage.name = "bottomStage";
  //bottomStage.enableDOMEvents(false); // you can set this if the bottom stage is completely covered by the top stage, to reduce the number of active event listeners.
  topStage = stageSetup("canvasTwo", handleEvt);
  topStage.name = "topStage";
  topStage.enableMouseOver();
  topStage.nextStage = bottomStage;
  bottomStage.enableMouseOver();
  bottomStage.addChild(makeSquare(30, 95, "red", handleEvt));
  topStage.addChild(makeSquare(375, 30, "#0F0", handleEvt));
  // text object to output the bottomStage.text = bottomStage.addChild(new createjs.Text("", "15px monospace", "#111")).set({x: 195, y: 30, lineHeight: 16.7});
  topStage.text = topStage.addChild(new createjs.Text("", "15px monospace", "#111")).set({x: 30, y: 30, lineHeight: 16.7});
}
```

--------------------------------

### Handle Asset Loading Completion

Source: https://github.com/createjs/easeljs/blob/master/examples/Game/Game.html

Called when all assets have finished loading. It clears the loading interval, sets up the score field, starts the background music, and prepares the game for restart.

```javascript
function doneLoading(event) {
  clearInterval(loadingInterval);
  scoreField = new createjs.Text("0", "bold 18px Arial", "#FFFFFF");
  scoreField.textAlign = "right";
  scoreField.x = canvas.width - 20;
  scoreField.y = 20;
  scoreField.maxWidth = 1000;
  messageField.text = "Welcome: Click to play";
  // start the music
  createjs.Sound.play("music", {interrupt: createjs.Sound.INTERRUPT_NONE, loop: -1, volume: 0.4});
  watchRestart();
}
```

--------------------------------

### Initialize EaselJS Stage and Create TextLinks

Source: https://github.com/createjs/easeljs/blob/master/examples/Text_links.html

Sets up the canvas, stage, and enables mouseover events. Creates multiple TextLink instances with different colors and adds them to the stage.

```javascript
function init() {
  //find canvas and load images, wait for last image to load
  canvas = document.getElementById("testCanvas");
  stage = new createjs.Stage(canvas);

  // we need to enable mouseover events for rollover/out and cursor to work:
  stage.enableMouseOver(20);

  // Create some TextLinks:
  var links = ["yellow", "blue", "green", "red", "purple", "orange"];
  for (var i = 0; i < links.length; i++) {
    var link = new TextLink(links[i] + " link!", "36px Arial", links[i], "#FFF");
    link.x = 100;
    link.y = 50 + i * 50;
    link.addEventListener("click", handleClick);
    link.cursor = "pointer";
    stage.addChild(link);
  }

  createjs.Ticker.addEventListener("tick", stage);
}
```

--------------------------------

### Draw Bar Graph with EaselJS

Source: https://github.com/createjs/easeljs/blob/master/examples/BarGraph.html

Example of using Graphics, Shape, Text, and Container classes to draw a simple vector bar graph. Reload for new random data.

```javascript
var canvas = new createjs.Stage("demoCanvas");

var barGraph = new createjs.Container();
barGraph.x = 50;
barGraph.y = 200;
canvas.addChild(barGraph);

var barWidth = 30;
var barHeight = 150;
var numBars = 10;
var barSpacing = 10;

for (var i = 0; i < numBars; i++) {
  var bar = new createjs.Container();
  bar.x = i * (barWidth + barSpacing);
  bar.y = -barHeight;
  barGraph.addChild(bar);

  var barShape = new createjs.Shape();
  bar.addChild(barShape);

  var h = Math.random() * barHeight;
  var hue = Math.random() * 360;

  // Draw the bar
  barShape.graphics.clear()
    .beginFill(createjs.Graphics.getHSL(hue, 60, 50, 0.7))
    .rect(0, 0, barWidth, h);

  // Add a text label
  var label = new createjs.Text(Math.round(h).toString(), "12px Arial", "#000");
  label.textAlign = "center";
  label.x = barWidth / 2;
  label.y = h + 5;
  bar.addChild(label);

  // Store hue for potential redraw
  bar.hue = hue;
}

canvas.update();
```

--------------------------------

### Initialize and Transform Bitmap with EaselJS

Source: https://github.com/createjs/easeljs/blob/master/examples/Transform_simple.html

Sets up an EaselJS stage, loads an image, and applies initial transformations (registration point, position, scale) to a bitmap. This code should be run when the page loads.

```javascript
var img;
var stage;
var angle;

function init() {
  angle = 0;
  img = new Image();
  img.onload = handleImageLoad;
  img.src = "../\_assets/art/robot.png";
}

function stop() {
  createjs.Ticker.removeEventListener("tick", tick);
}

function handleImageLoad() {
  var canvas = document.getElementById("testCanvas");
  stage = new createjs.Stage(canvas);
  stage.autoClear = true;
  bmp = new createjs.Bitmap(img);
  bmp.regX = img.width >> 1;
  bmp.regY = img.height >> 1;
  bmp.x = canvas.width >> 1;
  bmp.y = canvas.height >> 1;
  bmp.scale = 0.1;
  stage.addChild(bmp);
  stage.update();
  createjs.Ticker.timingMode = createjs.Ticker.RAF;
  createjs.Ticker.addEventListener("tick", tick);
}

function tick(event) {
  angle += 0.01;
  var value = Math.sin(angle) * 360;
  bmp.rotation = value;
  bmp.scale = value / 360;
  stage.update(event);
}
```

--------------------------------

### Input Handling for Game Controls in EaselJS

Source: https://github.com/createjs/easeljs/blob/master/examples/Game/Game.html

Sets up event listeners for keyboard input to control game actions like movement and firing. This snippet shows the start of the keydown handler.

```javascript
//allow for WASD and arrow control scheme
function handleKeyDown(e) {
  //cross browser issues exist
  if (!e) {
    var e = window.event;
  }
  switch (e.k
```

--------------------------------

### Running the SVG Export Process

Source: https://github.com/createjs/easeljs/blob/master/extras/SVGExporter/SVGExport.html

Initializes the SVGExporter with the stage and export options, then runs the export process. It measures the time taken for the export and schedules the addition of a download link.

```javascript
exporter = new SVGExporter(stage, false, false, false);
var t = new Date().getTime();
exporter.run();
statusEl.innerHTML = "Export took: "+(new Date().getTime() - t)+"ms ";
setTimeout(addDownload, 1);
```

--------------------------------

### Apply ColorFilter to a Bitmap

Source: https://context7.com/createjs/easeljs/llms.txt

Applies a ColorFilter to a Bitmap to modify its colors based on multiplier and offset values per channel. The example shows how to turn an image solid blue and then tint it red.

```javascript
var colorFilter = new createjs.ColorFilter(
    0, 0, 0, 1,    // redMult, greenMult, blueMult, alphaMult
    0, 0, 255, 0   // redOffset, greenOffset, blueOffset, alphaOffset
); // turns anything solid blue
var bmp = new createjs.Bitmap("photo.jpg");
bmp.filters = [colorFilter];
bmp.cache(0, 0, 400, 300);

// Tint red: keep red channel, zero out others
bmp.filters = [new createjs.ColorFilter(1, 0, 0, 1)];
bmp.updateCache();
```