createjs easeljs camera demo

Simple demonstration of a movable camera in easeljs by rotating and translating the world!

by Morgan Gilroy

HTML

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<canvas id="testCanvas" width="300" height="100" style="background-color: #FFFFFF;" tabindex="0"></canvas>
<!--
Controls:

Move Forwards: up arrow or w
Move Backwards: down arrow or s
Move Left: a
Move Right:  d
Turn Left: left arrow
Turn Right: right arrow
Toggle Rotate/Fixed Camera: e
Zoom +/-: Mouse Wheel
-->

CSS

body {
  margin: 0px;
  overflow: hidden;
}

canvas {
  display: inline-block;
  vertical-align: baseline;
  line-height: 0px;
  font-size: 0px;
}

JavaScript

var stage, canvasWidth, canvasHeight;
var world, worldWidth, worldHeight;
var player;
var fpsText;
var DEG_TO_RAD = Math.PI / 180;
playerMoveSpeed = 200; //pixels per second
playerTurnSpeed = 60; //degrees per second
var canvas;

function init() {
  canvas = document.getElementById('testCanvas');
  stage = new createjs.Stage("testCanvas");
  stage.canvas.width = canvasWidth = window.innerWidth;
  stage.canvas.height = canvasHeight = window.innerHeight;
  worldWidth = 3000; //canvasWidth * 5;
  worldHeight = 3000; //canvasHeight * 5;

  world = new createjs.Container();

  //make afloor for the world so we know when we are near the edge
  var worldShape = new createjs.Shape();
  worldShape.graphics.beginFill('#c5dbf7')
    .setStrokeStyle(10)
    .beginStroke('#819ec3')
    .drawRect(0, 0, worldWidth, worldHeight);
  worldShape.x = -worldWidth / 2;
  worldShape.y = -worldHeight / 2;

  //adding this first so it is drawn first, everything else will be on top of this.
  world.addChild(worldShape);

  //move the world to center player in teh middle of the canvas
  world.x = canvasWidth / 2;
  world.y = canvasHeight / 2;

  //create a bunch of random shapes
  for (var i = 0; i < 100; i++) {
    var r = Math.floor(Math.random() * 5) + 1;
    var hue = Math.random() * 360;
    var saturation = 50 + Math.random() * 50;
    var lightness = 75 + Math.random() * 25;
    var shape = new createjs.Shape();

    shape.graphics.setStrokeStyle(2)
      .beginFill(createjs.Graphics.getHSL(hue, saturation, lightness))
      .beginStroke(createjs.Graphics.getHSL(hue, saturation, lightness / 1.5));

    var w, h;
    switch (r) {
      case 1:
        shape.graphics.drawCircle(0, 0, 50 + Math.random() * 100);
        break;
      case 2:
        w = 50 + Math.random() * 100;
        h = 50 + Math.random() * 100;
        shape.graphics.drawEllipse(-w / 2, -h / 2, w, h);
        break;
      case 3:
        shape.graphics.drawPolyStar(0, 0, 50 + Math.random() * 10, Math.floor(3 +...