JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/EaselJS/0.7.1/easeljs.min.js"></script>
<canvas id="demoCanvas"></canvas>

CSS

#demoCanvas {
    border: 2px solid #000;
    
}

JavaScript

var stage = new createjs.Stage("demoCanvas");
//Create a Shape DisplayObject.
var circle = new createjs.Shape();
circle.graphics.beginFill("#a00").drawCircle(0, 0, 40);
//Set position of Shape instance.
circle.x = circle.y = 50;
//Add Shape instance to stage display list.
stage.addChild(circle);
//Update stage will render next frame
stage.update();

circle.addEventListener("click", handleClick);
 function handleClick(event){
     console.log(circle)
     circle.x = circle.x + 10;
     circle.y++;
  //   circle.r = circle.r + 20;
     stage.update()
     
     // Click happenened
 }

/* displayObject.addEventListener("mousedown", handlePress);
 function handlePress(event) {
     // A mouse press happened.
     // Listen for mouse move while the mouse is down:
     event.addEventListener("mousemove", handleMove);
 }
 function handleMove(event) {
     // Check out the DragAndDrop example in GitHub for more
 }
 
 */