JSFiddle - React, Tailwind, and code Playground

by kzhdev

HTML

<script type="text/javascript" src="https://dl-web.dropbox.com/get/Public/kinetic-v5.0.1.js?_subject_uid=805914&w=AADGbJgvqBKrslIdZuCHZt-Nhkz9TvhM1Ioj1bDUcBIbqQ"></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,
    listening: false
});
var rect = new Kinetic.Rect({
    x: 10,
    y: 10,
    width: 50,
    height: 50,
    stroke: 'grey',
    strokeWidth: 3,
    fill: 'yellow',
    listening: true
});

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();