JSFiddle - React, Tailwind, and code Playground

by magneto903

HTML

<html>
  <head>
    <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    <script>      
      function init() {
        var stage = new createjs.Stage("demoCanvas");
        var circle = new createjs.Shape();
        circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
        circle.x = 100;
        circle.y = 100;
        stage.addChild(circle);
        stage.update();
      }
        //Update stage will render next frame
    createjs.Ticker.addEventListener("tick", handleTick);

    function handleTick() {
     //Circle will move 10 units to the right.
        circle.x += 10;
        //Will cause the circle to wrap back
        if (circle.x > stage.canvas.width) { circle.x = 0; }
        stage.update();
    }
     var shape = new createjs.Shape().set({x:100,y:100});
 shape.graphics.beginFill("#ff0000").drawCircle(0,0,50);

 var blurFilter = new createjs.BlurFilter(5, 5, 1);
 shape.filters = [blurFilter];
 var bounds = blurFilter.getBounds();

 shape.cache(-50+bounds.x, -50+bounds.y, 100+bounds.width, 100+bounds.height);
    </script>
  </head>
  <body onload="init();">
    <canvas id="demoCanvas" width="500" height="200"></canvas>
  </body>
</html>