CreateJS | Getting Started

Include the EaselJS libraries in your project by linking to the CreateJS CDN.

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>

Create a canvas element within your body tag, and set the body to call a function when it has loaded.

<body onload="init();">
  <canvas id="demoCanvas" width="500" height="300"></canvas>
</body>

Create a function called init() and append it to either the head or body. This is where we will use EaselJS.

<script>
  function init() {
    // code here.
  }
</script>

Define a stage by creating a new Stage instance, passing in our canvas element's ID. This stage will hold all of our display objects and act as the visual container to our project.

var stage = new createjs.Stage("demoCanvas");

Let's create a shape. First, we need a new Shape instance. Then we can use shape's graphics API to give it color and bounds. Position it on the canvas with x and y coordinates, and add it to our stage.

var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);

Finally, we need to update our stage to display the shape we just added.

stage.update();

Voila! You should have a nice blue circle on your canvas. You're on your way to being an EaselJS Picasso!

Show Code

<html>
  <head>
    <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    <script>      
      function init() {
        var stage = new createjs.Stage("demoCanvas");
        var circle = new createjs.Shape();
        circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
        circle.x = 100;
        circle.y = 100;
        stage.addChild(circle);
        stage.update();
      }
    </script>
  </head>
  <body onload="init();">
    <canvas id="demoCanvas" width="500" height="200"></canvas>
  </body>
</html>

Docs View Library

Let's start with something easy. Follow our EaselJS tutorial above to get a shape on our canvas.

If you only have EaselJS added to your head, add TweenJS as well.

<script src="https://code.createjs.com/1.0.0/tweenjs.min.js"></script>

Remove the stage.update() call that we have at the bottom of our init() function.

In that empty space is where we will put our tweening. First, get our circle instance and pass in loop: true, so our animation runs infinitely. The .to's you see tell the object what to do and where to go, as well as how long to take and what easing to use. Changing the x value will move the object horizontally, and changing the alpha value will fade it out or in.

createjs.Tween.get(circle, { loop: true })
  .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
  .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
  .to({ alpha: 0, y: 225 }, 100)
  .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
  .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

Remember that we removed stage.update() from our script. This is because Tween has its own way of refreshing the stage. First, set the FPS (how many times you want the stage to refresh per second). Second, add an event listener to that same Ticker class that will actually cause the stage refresh each time a tick is caught.

createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);

Ta da! Your red circle should now shift right, fade in and out, and then zip back to its original place. Feel free to change the values as you see fit.

Show Code

<html>
  <head>
    <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    <script>
      function init() {
        var stage = new createjs.Stage("demoCanvas");
        var circle = new createjs.Shape();
        circle.graphics.beginFill("Crimson").drawCircle(0, 0, 50);
        circle.x = 100;
        circle.y = 100;
        stage.addChild(circle);
        createjs.Tween.get(circle, {loop: true})
          .to({x: 400}, 1000, createjs.Ease.getPowInOut(4))
          .to({alpha: 0, y: 75}, 500, createjs.Ease.getPowInOut(2))
          .to({alpha: 0, y: 125}, 100)
          .to({alpha: 1, y: 100}, 500, createjs.Ease.getPowInOut(2))
          .to({x: 100}, 800, createjs.Ease.getPowInOut(2));
        createjs.Ticker.setFPS(60);
        createjs.Ticker.addEventListener("tick", stage);
      }
    </script>
  </head>
  <body onload="init();">
    <canvas id="demoCanvas" width="500" height="200"></canvas>
  </body>
</html>

Docs View Library

Include the SoundJS libraries in your project by linking to the CreateJS CDN.

<script src="https://code.createjs.com/1.0.0/soundjs.min.js"></script></head>

There are many ways to load and play a sound. Since we want to be able to use this sound repeatedly, we will load it once on the body load, and play it any time we click our desired element.

<body onload="loadSound();">
  <button onclick="playSound();" class="playSound">Play Sound</button>
</body>

Don't have an audio file handy? Use ours:

For this basic example, we only need one sound file. We're going to put the sound ID in the global scope for ease of access.

var soundID = "Thunder";

Now to load the sound. In the document head, access the Sound class and call the registerSound() method, passing in the path to our file and the ID that we want to be associated with it.

function loadSound () {
  createjs.Sound.registerSound("assets/thunder.mp3", soundID);
}

To play the sound, call the play() method and pass in our soundID variable.

function playSound () {
  createjs.Sound.play(soundID);
}

Click away! The sound will play every time you click the button.

Show Code

<html>
  <head>
    <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    <script>
      var soundID = "Thunder";

      function loadSound () {
        createjs.Sound.registerSound("assets/thunder.ogg", soundID);
      }

      function playSound () {
        createjs.Sound.play(soundID);
      }
    </script>
  </head>
  <body onload="loadSound();">
    <button onclick="playSound();" class="playSound">Play Sound</button>
  </body>
</html>

Docs View Library

Include the PreloadJS libraries in your project by linking to the CreateJS CDN.

<script src="https://code.createjs.com/1.0.0/preloadjs.min.js"></script>

There are several ways to trigger the loading of assets. We're going to call the load function when we click this button.

<button onclick="loadImage();" class="load-image">Load Image</button>

Instantiate a new LoadQueue class that we can use during this tutorial. Since we want to call a function when our asset load completes, apply an event listener to the queue instance for that listens for 'fileload' and calls the handleFileComplete function when it is triggered. Use the loadFile() method to load your chosen file by passing in its source.

function loadImage() {
  var preload = new createjs.LoadQueue();
  preload.addEventListener("fileload", handleFileComplete);
  preload.loadFile("assets/preloadjs-bg-center.png");
}

PreloadJS recognizes file types and sets the HTML elements it appends accordingly. Read more here: LoadQueue Docs

Append your returned asset to the document.

function handleFileComplete(event) {
  document.body.appendChild(event.result);
}

Bravo! You've made it possible to dynamically load assets whenever you want!

Getting an error related to CORS-Request and stuff about HTTP Headers? You're probably linking your file source from outside your project files or web domain. Read more here: PreloadJS and CORS

Show Code

<html>
  <head>
    <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    <script>
      function loadImage() {
        var preload = new createjs.LoadQueue();
        preload.addEventListener("fileload", handleFileComplete);
        preload.loadFile("assets/preloadjs-bg-center.png");
      }

      function handleFileComplete(event) {
        document.body.appendChild(event.result);
      }
    </script>
  </head>
  <body>
    <button onclick="loadImage();" class="load-image">Load Image</button>
  </body>
</html>

Docs View Library

Getting Started

Official Tutorials

Community Tutorials

Community Tutorials

Official Tutorials

Community Tutorials

Community Tutorials