JSFiddle - React, Tailwind, and code Playground

by theacadian

HTML

<body>
<div id="container"></div>
<script defer="defer">
var stage = new Kinetic.Stage({
        container: 'container',
        width: 250,
        height: 120
      });

var layer = new Kinetic.Layer();

var imageObj = new Image();

imageObj.onload = function() {
  var yoda1 = new Kinetic.Image({
          x: 0,
          y: 0,
          image: imageObj,
          width: 106,
          height: 118
        });
  var yoda2 = new Kinetic.Image({
          x: 106+10,
          y: 0,
          image: imageObj,
          width: 106,
          height: 118
        });
  // add the shape to the layer
  layer.add(yoda1);
  layer.add(yoda2);

  // add the layer to the stage
  stage.add(layer);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
    
    stage.toDataURL({
          callback: function(dataUrl) {
            /*
             * here you can do anything you like with the data url.
             * In this tutorial we'll just open the url with the browser
             * so that you can see the result as an image
             */
            window.open(dataUrl);
          }
        });
</script>
</body>