JSFiddle - React, Tailwind, and code Playground

by confile

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.js"></script>


 <div id="con"></div>

JavaScript

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

var bgImage = new Image();
bgImage.onload = function () {
    var bgimg = new Kinetic.Image({
        image: bgImage,
        width: 1000,
        height: 1000,
    });
    layer.add(bgimg);
    layer.draw();
    
    var img=new Image();
    img.onload = function () {
        var image1 = new Kinetic.Image({
            image: img,
            x: 300,
            y: 300
        });
        layer.add(image1);
        layer.draw();
        
        image1.scale({
            x: 0.3,
            y: 0.3
        });   
        
        image1.rotate(45);
        
        layer.draw();
       // image1.image = img;
         
        stage.toImage({
            mimeType: "image/jpeg",
            quality: 1.0,
            callback: function(image) {
                document.body.appendChild(image);
            }
        });
        
    }
    img.crossOrigin="anonymous";
    img.src = "https://dl.dropboxusercontent.com/u/47067729/sandwich2.svg";
    
}
bgImage.crossOrigin="anonymous";
bgImage.src = "https://dl.dropboxusercontent.com/u/47067729/Foto2.jpg";