JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>
<body onload="init();">
    <canvas id="canvas" width="300" height="200">
    </canvas>
    <button onclick="zoom()">zoom it</button>
</body>

CSS

body{
   position:absolute;
}

JavaScript

var stage;
var container;
function zoom(){
    document.body.style.transform = "scale(2)";
    //container.scaleX = container.scaleY = 2;
    var body = document.getElementsByTagName("body")[0];
    body.style.transformOrigin = "top left";

}
function init() {
   
    stage = new createjs.Stage("canvas");
    container = new createjs.Container();
    var rect1 = new createjs.Shape();
    rect1.graphics.beginFill("#ff0000").drawRect(10, 10, 100, 100);
    rect1.name = "rect1";
    container.addChild(rect1);
    var rect2 = new createjs.Shape();
    rect2.name = "rect2";
    rect2.graphics.beginFill("#00ff00").drawRect(120, 10, 100, 100);
    container.addChild(rect2);
    stage.on('stagemousedown', onClick);
//    container.addEventListener('mousedown', onClick2 );
    stage.addChild( container );

    stage.update();
}

function onClick(e) {
    console.log( stage.getObjectUnderPoint(e.stageX, e.stageY), e.stageX + " " + e.stageY );
    alert(stage.getObjectUnderPoint(e.stageX, e.stageY));
}

function onClick2(e) {
    console.log( stage.getObjectUnderPoint(e.stageX, e.stageY), e.stageX + " " + e.stageY );
    alert("hola " + stage.getObjectUnderPoint(e.stageX, e.stageY));
}