JSFiddle - React, Tailwind, and code Playground

by lannymcnie

HTML

<script src="https://code.createjs.com/easeljs-0.7.0.min.js"></script>
      <section>
         <div id="kanvas" style="position:relative; width:400px; height:300px">
            <canvas id="layer1"
               style="z-index: 1;
               position:absolute;
               left:0px;
               top:0px;
               " height="300px" width="400">
               This text is displayed if your browser does not support HTML5 Canvas.
            </canvas>
<!--            <canvas id="layer2"
               style="z-index: 2;
               position:absolute;
               left:0px;
               top:0px;
               " height="300px" width="400">
               This text is displayed if your browser does not support HTML5 Canvas.
            </canvas>-->
            <canvas width="100" height="100" style="z-index: 2;pointer-events: none;position:absolute;left:50%;top:50%;" id="layer3">
               This text is displayed if your browser does not support HTML5 Canvas.
            </canvas>
         </div>
      </section>

JavaScript

var layer1;
            var layer2;
            var layer3;
            var ctx1;
            var ctx2;
            var ctx3;
            var x = 400;
            var y = 300;
            var dx = 2;
            var dy = 4;
            var WIDTH = 400;
            var HEIGHT = 300;
            var city = new Image();

//LM: Container
var container, circle;
            
            function init() {
                city.src ="city.png";
                layer1 = document.getElementById("layer1");
                ctx1 = layer1.getContext("2d");
                
                stage = new createjs.Stage("layer1");
                aniObj  =   requestAnimationFrame(drawAll);
                
                container = new createjs.Container();
                container.cache(0,0,400,300);
                stage.addChild(container);
                
                //LM: Draw the circle once.
                circle = new createjs.Shape();
                circle.graphics.clear() //LM: Clear is important here, since we reuse the shape. Before it did nothing
                    .beginStroke("#f00").beginFill("#444444")
                    .drawCircle(0, 0, 25);
                container.addChild(circle);
          
                //LM: Moved here, so it happens once.
                circle.on("click", function() {
                    cancelAnimationFrame(aniObj);
                    console.log('circle Clicked');
                });
            }
            
            function drawAll() {
                aniObj  =   requestAnimationFrame(drawAll);
                draw1();
                //draw2();
                //draw3();
            }
            
            function draw1() {
                
                
                //LM: Removed old code.
                
                //LM: REMOVED. uses the global version above instead.
                // circle  = new createjs.Shape();
                
                circle.x = x;
                circle.y = y;
  ...