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>
    <div>WORD</div>
    <button onclick="zoom()">zoom it</button>
</body>

JavaScript

var stage;
var container;
var container2;
function zoom(){
    document.body.style.zoom = 2;
    container2.scaleX = container2.scaleY = 2;
    stage.update();
}
function init() {
    
    stage = new createjs.Stage("canvas");
    container = new createjs.Container();
    container2 = 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);
    
    var rect3 = new createjs.Shape();
    rect3.graphics.beginFill("#ff0000").drawRect(10, 10, 100, 100);
    rect3.name = "rect1";
    rect3.alpha = 0.001;
    container2.addChild(rect3);
    var rect4 = new createjs.Shape();
    rect4.name = "rect2";
    rect4.graphics.beginFill("#00ff00").drawRect(120, 10, 100, 100);
    rect4.alpha = 0.001;
    container2.addChild(rect4);
    stage.on('stagemousedown', onClick);
//    container.addEventListener('mousedown', onClick2 );
    stage.addChild( container );
    stage.addChild( container2 );

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