JSFiddle - React, Tailwind, and code Playground

by YOUNY zhu

HTML

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

CSS

body {
    margin: 0;
    padding: 0;
}

JavaScript

var stage = new Kinetic.Stage({
        container: 'container',
        width: 500,
        height: 500
      });
      var layer = new Kinetic.Layer();
      var group = new Kinetic.Group({
      	clipFunc: function(canvas) {
      		var context = canvas.getContext();
			context.beginPath();
			context.arc(250, 250, 50, 0, 2 * Math.PI, false);
            context.clip();
      	},
          draggable:true
      });
      
      var rect = new Kinetic.Rect({
      	x: 150,
      	y: 225,
      	width: 200,
      	height: 200,
      	fill: 'blue',
      	stroke: 'black',
      	strokeWidth: 2
      });
      
      group.add(rect);
      layer.add(group);
      stage.add(layer);