JSFiddle - React, Tailwind, and code Playground

by confile

HTML

<script src="https://dl.dropboxusercontent.com/u/47067729/kinetic.min.js"></script>
<div id="container"></div>

CSS

body {
    margin: 0px;
    padding: 0px;
}
#container {
    background-color: #222;
    display: inline-block;
    width: 1000px;
    height: 1200px;
}
#buttons {
    position: absolute;
    top: 5px;
    left: 10px;
}
#buttons > input {
    padding: 10px;
    display: block;
    margin-top: 5px;
}

JavaScript

console.log(Kinetic.pixelRatio);


function start() {

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 1000,
        height: 1200
    });
    var layer = new Kinetic.Layer();

    var imageObj = new Image();
    imageObj.onload = function () {


        var blob = new Kinetic.Image({
            image: imageObj,
            x: 150,
            y: 40,
            draggable: true,
            width: 400,
            height: 400
        });

        // performance
        blob.transformsEnabled('position');


        // add the shape to the layer
        layer.add(blob);

        // add the layer to the stage
        stage.add(layer);

        /*
    blob.cache({
        width: 500,
        height: 500,
        drawBorder: true
      }).offset({
        x: 10,
        y: 10
      });
      */

        /*
    blob.cache({
        drawBorder: true
        });
    */

        layer.batchDraw();

    };

    imageObj.src = "https://dl.dropboxusercontent.com/u/47067729/sandwich2.svg";
}


window.requestAnimationFrame(start);
//start();