JSFiddle - React, Tailwind, and code Playground

by ling ding

HTML

<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<canvas id="demoCanvas" width="400" height="400">
    alternate content
</canvas>

JavaScript

var stage, holder;
function init() {
    stage = new createjs.Stage("demoCanvas");
    holder = stage.addChild(new createjs.Container());
    holder.x = holder.y = 200;
    
    for (var i=0; i<25; i++) {
        var shape = new createjs.Shape();
        shape.graphics.beginFill(createjs.Graphics.getHSL(Math.random()*360,100,50)).drawCircle(0,0,30);
        shape.x = Math.random()*300-150;
        shape.y = Math.random()*300-150;
        holder.addChild(shape); 
    }
    
    createjs.Ticker.on("tick", tick);
}

function tick(event) {
    holder.rotation += 3;
    var l = holder.getNumChildren();
    for (var i=0; i<l; i++) {
        var child = holder.getChildAt(i);
        child.alpha = 0.1;
        var pt = child.globalToLocal(stage.mouseX, stage.mouseY);
        if (stage.mouseInBounds && child.hitTest(pt.x, pt.y)) { child.alpha = 1; }
    }
    
    stage.update(event);
}
init();