JSFiddle - React, Tailwind, and code Playground

by YOUNY zhu

HTML

<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>

CSS

<style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>

JavaScript

var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 300
      });
      var layer = new Kinetic.Layer();
      var rect = new Kinetic.Rect({
        clip: {
          x: 110, 
          y: 50, 
          width: 180, 
          height: 80
        },
        x: 100,
        y: 40,
        width: 200,
        height: 100,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 10
      });
      var group = new Kinetic.Group({
        clip: {
          x: 100, 
          y: 40, 
          width: 200, 
          height: 100
        },
        draggable: true
      });
        
      var blueBlob = new Kinetic.Line({
        points: [73, 140, 340, 23, 500, 109, 300, 170],
        stroke: 'blue',
        strokeWidth: 10,
        fill: '#aaf',
        tension: 0.8,
        scale: {x:0.3,y:0.3},
        draggable:true,
        closed: true
      });

      var redBlob = new Kinetic.Line({
        points: [73, 140, 340, 23, 500, 109],
        stroke: 'red',
        strokeWidth: 10,
        fill: '#faa',
        tension: 1.2,
        closed: true,
        scale: {x:0.2,y:0.2},
        draggable:true,
        x: 100,
        y: 50
      });
		
      group.add(rect);
      group.add(blueBlob);
      group.add(redBlob);
      layer.add(group);
      stage.add(layer);