JSFiddle - React, Tailwind, and code Playground

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();
            
            function init() {
                city.src ="city.png";
                layer1 = document.getElementById("layer1");
                ctx1 = layer1.getContext("2d");
                
    //            layer2 = document.getElementById("layer2");
    //            ctx2 = layer2.getContext("2d");
                layer3 = document.getElementById("layer3");
                ctx3 = layer3.getContext("2d");
                //drawAll();
                setInterval(drawAll, 0.5);
            }
            
            function drawAll() {
                draw1();
                //draw2();
                draw3();
            }
            
            function draw1() {
//                ctx1.clearRect(0, 0, WIDTH, HEIGHT);
//                ctx1.fillStyle = "#444444";
//                ctx1.beginPath();
//                ctx1.arc(150, 150, 100, 0, Math.PI*2, true);
//                //ctx1.arc(x, y, 100, 0, Math.PI*2, true);
//                ctx1.closePath();
//                ctx1.fill();
//
//                if (x + dx > WIDTH || x + dx < 0)
//                dx = -dx;
//                if (y + dy > HEIGHT || y + dy < 0)
//                dy = -dy;
//
//                x += dx;
//                y += dy;
                if( typeof stage !=='undefined') 
                  stage.clear();
                stage = new createjs.Stage("layer1");
                circle = new createjs.Shape();
                circle.graphics.beginFill("#444444").drawCircle(0, 0, 50);
                circle.x = x;
                circle.y = y;

                circle.on("click", function() {
                    console.log('circle Clicked');
               ...