JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<button id="zoomIn">+</button>
<button id="zoomOut">-</button>
<div id="container"></div>

JavaScript

var width = 500;
var height = 500;
var zoom = 0.1;

var stage = new Kinetic.Stage({
    container: 'container',
    width: width,
    height: height,
    draggable: true
});

var layer = new Kinetic.Layer();

var group = new Kinetic.Group({
    x: width / 2,
    y: height / 2,
    width: width,
    height: height
});

group.setOffset(width / 2, height / 2);

var rect = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: width,
    height: height,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4
});

group.add(rect);
layer.add(group);
stage.add(layer);

document.getElementById('zoomIn').addEventListener('click', function () {
    group.setScale(group.getScale().x + zoom);
    stage.draw();
});

document.getElementById('zoomOut').addEventListener('click', function () {
    group.setScale(group.getScale().x - zoom);
    stage.draw();
});