JSFiddle - React, Tailwind, and code Playground

by bittu4u4ever

HTML

<div id="container"></div>
      <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.1-beta2.js"></script>

CSS

body {
        margin: 0px;
        padding: 0px;
      }

JavaScript

var stage = new Kinetic.Stage({
          container: 'container',
          width: 578,
          height: 200
        });
        var layer = new Kinetic.Layer();

        // bound below y=50
        var blueGroup = new Kinetic.Group({
          x: 100,
          y: 70,
          draggable: true,
          dragBoundFunc: function(pos) {
            var newY = pos.y < 50 ? 50 : pos.y;
            return {
              x: pos.x,
              y: newY
            };
          }
        });
        
        // bound inside a circle
        var yellowGroup = new Kinetic.Group({
          x: stage.getWidth() / 2,
          y: 70,
          draggable: true,
          dragBoundFunc: function(pos) {
            var x = stage.getWidth() / 2;
            var y = 70;
            var radius = 50;
            var scale = radius / Math.sqrt(Math.pow(pos.x - x, 2) + Math.pow(pos.y - y, 2));
            if(scale < 1)
              return {
                y: Math.round((pos.y - y) * scale + y),
                x: Math.round((pos.x - x) * scale + x)
              };
            else
              return pos;
          }
        });

        var blueText = new Kinetic.Text({
          fontSize: 26,
          fontFamily: 'Calibri',
          text: 'bound below',
          fill: 'black',
          padding: 10
        });

        var blueRect = new Kinetic.Rect({
          width: blueText.getWidth(),
          height: blueText.getHeight(),
          fill: '#aaf',
          stroke: 'black',
          strokeWidth: 4
        });

        var yellowText = new Kinetic.Text({
          fontSize: 26,
          fontFamily: 'Calibri',
          text: 'bound in circle',
          fill: 'black',
          padding: 10
        });

        var yellowRect = new Kinetic.Rect({
          width: yellowText.getWidth(),
          height: yellowText.getHeight(),
          fill: 'yellow',
          stroke: 'black',
          strokeWidth: 4
        });

        blueGroup.add(blueRect).add(blueText);
    ...