JSFiddle - React, Tailwind, and code Playground

by mslocum

HTML

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

JavaScript

var iWidth = 720,
    iHeight = 405,
    strImgSrc = "http://distilleryimage11.ak.instagram.com/e8df80a8a41111e3be071265523e6823_8.jpg",
    oStage = new Kinetic.Stage({
        container: 'myStage',
        width: iWidth,
        height: iHeight
    }),
    oLayer = new Kinetic.Layer(),
    oRect = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: iWidth,
        height: iHeight,
        fillPatternScale: {
            x: 1,
            y: 1
        },
        fillPatternOffset: {
            x: 0,
            y: 0
        }
    }),
    oImage = new Image();

oStage.add(oLayer);
oLayer.add(oRect);
oLayer.add(oClouds);

// Load Image
oImage.onload = function() {
    oRect.fillPatternImage(oImage);
    oStage.draw();
};
oImage.src = oImageNode.attrs.settings.src;