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="500" height="300">
    alternate content
</canvas>

JavaScript

var stage, output;
		
function init() {
    stage = new createjs.Stage("demoCanvas");
    
    // this lets our drag continue to track the mouse even when it leaves the canvas:
    // play with commenting this out to see the difference.
    stage.mouseMoveOutside = true; 
    
    var circle = new createjs.Shape();
    circle.graphics.beginFill("red").drawCircle(0, 0, 50);
    
    var label = new createjs.Text("drag me", "bold 14px Arial", "#FFFFFF");
    label.textAlign = "center";
    label.y = -7;
    
    var dragger = new createjs.Container();
    dragger.x = dragger.y = 100;
    dragger.addChild(circle, label);
    stage.addChild(dragger);
    
    dragger.on("pressmove",function(evt) {
        // currentTarget will be the container that the event listener was added to:
        evt.currentTarget.x = evt.stageX;
        evt.currentTarget.y = evt.stageY;
        // make sure to redraw the stage to show the change:
        stage.update();   
    });
    
    stage.update();
}

init();