JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

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

JavaScript

var count123=0;
function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }
      function draw(images) {
          
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 1000,
          height: 1000
        });
        var layer = new Kinetic.Layer();

        var colorPentagon = new Kinetic.RegularPolygon({
          x: 80,
          y: 70,
          sides: 6,
            rotationDeg:90,
            fillPatternRotationDeg:-90,
          radius: 70,
          fillPatternImage: images.darthVader,
          fillPatternOffset: [-220+(Math.cos(Math.PI/3.0)*(70*1.5)), 70+(Math.cos(Math.PI/6.0)*(70*1.5))],
          stroke: 'black',
          strokeWidth: 4,
          draggable: true
        });

        var patternPentagon = new Kinetic.RegularPolygon({
          x: 220,
          y: 70,
          sides: 6,
          radius: 70,
            rotationDeg:90+count123,
            fillPatternRotationDeg:-90-count123++,
          fillPatternImage: images.darthVader,
          fillPatternOffset: [-220, 70],
          stroke: 'black',
          strokeWidth: 4,
          draggable: true
        });

        var linearGradPentagon = new Kinetic.Shape({
    drawFunc: function(canvas) {
        var context = canvas.getContext();
        var radius=25/5;
        context.beginPath();
      
        
        drawEllipse(context,25/2.0, 10, 5*radius,5*radius);
        context.rect(0,0,50,50);
        context.closePath();
        canvas.fillStroke(this);
    },
          x: 360,
          y: stage.getHeight() / 2,
...