JSFiddle - React, Tailwind, and code Playground

by kzhdev

HTML

<script type="text/javascript" src="https://dl-web.dropbox.com/get/Public/kinetic-v5.0.0.js?_subject_uid=805914&w=AABFghcF1W_w2Kst12kBvMVvBO9GBqzKjSA6R-9A5sVV0g"></script>
<div id="canvasDiv"></div>
<img id="hit" src=""/>

JavaScript

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

var layer = new Kinetic.Layer();    

var group = new Kinetic.Group({
    x: 50,
    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
});

text.on('mouseenter', function() {
    alert('enter text');
});

group.add(rect);
group.add(text);
var cache = group.clone();
cache.setX(200);
cache.on('mouseenter', function() {
    alert('enter image');
});

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

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