JSFiddle - React, Tailwind, and code Playground

by kzhdev

HTML

<script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
<div id="canvasDiv"></div>
<img id="hit" src="" />

JavaScript

var stage = new Kinetic.Stage({
    container: 'canvasDiv',
    width: 400,
    height: 200,
    draggable: false,
    pixelRatio: 2
});

var layer = new Kinetic.Layer();    

var group = new Kinetic.Group({
    x: 100,
    y: 50,
    width: 70,
    height: 70
});
var rect = new Kinetic.Rect({
    x: 10,
    y: 10,
    width: 50,
    height: 50,
    stroke: 'grey',
    strokeWidth: 3,
    fill: 'yellow',
});

var text = new Kinetic.Text({
    x: 28,
    y: 25,
    text: 'A',
    fill: 'black',
    fontSize: 24
});
group.add(rect);
group.add(text);
var cache = group.clone();
cache.setX(200);

layer.add(group);
layer.add(cache);
cache.cache();

stage.add(layer);

document.getElementById('hit').src = layer.getHitCanvas().toDataURL();