JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
<br/><p>Drag the black background under the foreground oval</p><br/>
<div id="container"></div>

CSS

body {
       margin: 0px;
       padding: 0px;
   }
   canvas {
       border: 1px solid red;
   }

JavaScript

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

var layer = new Kinetic.Layer();
stage.add(layer);
var background = new Kinetic.Rect({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    width: 250,
    height: 250,
    fill: 'black',
    stroke: 'black',
    strokeWidth: 4,
    draggable: true
});

var foreground = new Kinetic.Ellipse({
    x: stage.getWidth() / 3,
    y: stage.getHeight() / 3,
    radius: {
        x: 50,
        y: 30
    },
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4
});

// add the background and foreground to the layer
layer.add(foreground);
layer.draw();
layer.getContext().globalCompositeOperation = "destination-over";

layer.add(background);
layer.draw();