JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>
<div id="container"></div>

CSS

#container {
    border:solid 1px #ccc;
    margin-top: 10px;
    width:450px;
    height:450px;
}

JavaScript

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

// use a temp canvas to create a pattern
var pattern = document.createElement('canvas');
pattern.width = 40;
pattern.height = 40;
var pctx = pattern.getContext('2d');
pctx.fillStyle = "rgb(188, 222, 178)";
pctx.fillRect(0, 0, 20, 20);
pctx.fillRect(20, 20, 20, 20);

// make an image from the temp canvas pattern
var img = new Image();
img.onload = function () {

    // make a kinetic polygon filled with the pattern
    var polyPattern = new Kinetic.Polygon({
        points: [30, 30, 300, 30, 400, 60, 300, 150, 200, 50, 100, 450],
        fillPatternImage: img,
        stroke: 'black',
        strokeWidth: 3
    });
    // add the shape to the layer and layer.draw()
    layer.add(polyPattern);
    layer.draw();

}
img.src = pattern.toDataURL();