JSFiddle - React, Tailwind, and code Playground

by stot

HTML

<script src="http://code.createjs.com/easeljs-0.6.1.min.js"></script>
<h1>Canvas Animation (EaselJS) V2</h1>

<div class="canvasHolder">
    <canvas id="testCanvas" width="400" height="200"></canvas>
</div>

JavaScript

//Based on the createjs spritesheet examples.
var stage;
(

function run() {
    stage = new createjs.Stage(document.getElementById("testCanvas"));

    var ss = new createjs.SpriteSheet({
        "animations": {
            "run": [0, 9]
        },
            "images": ["http://opengameart.org/sites/default/files/air-blast.png"],
            "frames": {
            "width": 201,
            "height": 201
        }
    });

    var animation = new createjs.BitmapAnimation(ss);
    animation.x = 50;
    animation.y = 0
    animation.scaleX = animation.scaleY = 1;

    animation.gotoAndPlay("run");

    stage.addEventListener("click", function () {
        animation.gotoAndPlay("run");
    });
    stage.addEventListener("stagemousedown", function () {
        animation.gotoAndPlay("jump");
    });
    stage.addChild(animation);
    createjs.Ticker.setFPS(20);
    createjs.Ticker.addEventListener("tick", stage);
})();


/*
64 x 64
http://opengameart.org/sites/default/files/plasmaball.png
64 x 64
http://opengameart.org/sites/default/files/freeze.png
256 x 128
http://opengameart.org/sites/default/files/quake_0.png
*/