JSFiddle - React, Tailwind, and code Playground

by Mario Winkler

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.min.js"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.min.js"> </script-->

<div id="container"></div>

JavaScript

(function (Kinetic) {
  "use strict";

  var sources = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";

  function loadImage(source, callback) {
    var image = new Image();

    image.onload = function() {
      callback(image);
    };

    image.src = source;
  }

  function drawImageOnContainer(image) {
    var stage,
        layer = new Kinetic.Layer();
    
    stage = new Kinetic.Stage({
      container: "container",
      width: 578,
      height: 200
    });

    var darthVaderImg = new Kinetic.Image({
      image: image,
      offset: {x: 200 / 2, y: 137 / 2},
      width: 200,
      height: 137
    });

    darthVaderImg.position({x:200, y:100});
    layer.add(darthVaderImg);
    stage.add(layer);
  }

  // draw the darn vaderinho
  loadImage(sources, drawImageOnContainer);

})(Kinetic);